vue : rem自适应的应用
我们知道，rem是一个css单位，指的是HTML根节点的字体大小。
而我们在用rem布局的时候必然会遇到一个问题：我们需要根据用户的屏幕大小去计算rem。
以下是代码。
（在VUE中使用）
...
created() { // rem 适配
(function(win) {
var docEl = win.document.documentElement;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
if (width >= 1920) {
// 最大宽度
width = 1920;
}
var rem = width / 19.2;
if (rem > 100) {
rem = 100;
}
docEl.style.fontSize = rem + "px";
if (width < 1366) {
docEl.style.fontSize = 70 + "px";
}
}
win.addEventListener(
"resize",
function() {
refreshRem();
},
false
);
win.addEventListener(
"pageshow",
function(e) {
if (e.persisted) {
refreshRem();
}
},
false
);
refreshRem();
})(window); },
...
===
（在原生项目中使用）
rem.js
(function(win) {
var docEl = win.document.documentElement;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
if (width >= 1920) {
// 最大宽度
width = 1920;
}
var rem = width / 19.2;
if (rem > 100) {
rem = 100;
}
docEl.style.fontSize = rem + "px";
if (width < 1366) {
docEl.style.fontSize = 70 + "px";
}
}
win.addEventListener(
"resize",
function() {
refreshRem();
},
false
);
win.addEventListener(
"pageshow",
function(e) {
if (e.persisted) {
refreshRem();
}
},
false
);
refreshRem();
})(window);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 引入rem -->
<script src="./js/rem.js" type="text/javascript"></script>
<title>...</title>
</head>
...
以上。
vue : rem自适应的应用的更多相关文章
- rem自适应布局的回顾总结
使用rem实现自适应布局,应该算是当前移动前端的一大趋势,有些人对此还有点迷惑,搞不懂rem是如何实现自适应布局,如何根据设计稿来调整rem的值?rem布局如何用雪碧背景图片?rem一定要加载JS吗? ...
- 【转载】rem自适应布局-移动端自适应必备
原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不 ...
- rem自适应js
Rem自适应js---flexible.min.js 网上看到很多移动端适配的各种方法,由于原来工作中对rem的疏忽,所以决定重新学习rem~ 由于移动端特殊性,本文讲的是如何使用rem实现自适应 ...
- 【转】rem自适应布局
rem自适应原理 rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局.更多介绍请看这篇文章:rem是 ...
- rem自适应
//REM自适应 _resize(); window.addEventListener('resize', _resize, false); function _resize() { var devi ...
- Rem自适应js---flexible.min.js
网上看到很多移动端适配的各种方法,由于原来工作中对rem的疏忽,所以决定重新学习rem~ 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应 ...
- rem自适应布局
rem自适应原理 rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局.更多介绍请看这篇文章:rem是 ...
- rem自适应原理
rem自适应原理 rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局.更多介绍请看这篇文章:rem是 ...
- autoHeight.vue 高度自适应
autoHeight.vue 高度自适应 <!-- * @description 自适应高度 * @fileName autoHeight.vue * @author 彭成刚 * @date 2 ...
随机推荐
- python中那些鲜为人知的功能特性
经常逛GitHub的可能关注一个牛叉的项目,叫 What the f*ck Python! 这个项目列出了几乎所有python中那些鲜为人知的功能特性,有些功能第一次遇见时,你会冒出 what the ...
- jenkins构建报错 Error fetching remote repo 'origin'
ERROR: Error fetching remote repo 'origin' Finished: FAILURE // 原因如下 原因一:可能是配置的git分支的权限问题,检查一下配置里面的源 ...
- Java 多线程基础（八）线程让步
Java 多线程基础(八)线程让步 yield 一.yield 介绍 yield()的作用是让步.它能让当前线程由“运行状态”进入到“就绪状态”,从而让其它具有相同优先级的等待线程获取执行权:但是,并 ...
- 容器中的Java堆大小调整：快速，轻松
在上一篇博客中,我们已经看到Java进行了改进,可以根据正在运行的环境(即物理机或容器(码头工人))识别内存.java的最初问题是,它无法弄清楚它是否在容器中运行,并且它曾经为容器运行所在的整个硬件捕 ...
- 网易java高级开发课程 面对上亿数据量，网易用啥技术？
- 部署rabbitMQ镜像集群实战测试
部署rabbitMQ镜像集群 版本信息 rabbit MQ: 3.8.5 Erlang: 官方建议最低21.3 推荐22.x 这里用的是23 环境准备 主机规划 主机 节点 172.16.14.3 磁 ...
- Python3-在windows快速运行一个简单的本地 HTTP 服务器
1.打开控制台2.python -m http.server
- Python中的错误和异常
前言 错误是程序中的问题,由于这些问题而导致程序停止执行.另一方面,当某些内部事件发生时,会引发异常,从而改变程序的正常流程. python中会发生两种类型的错误. 语法错误 逻辑错误(异常) 语法错 ...
- Conda太慢？试试这个加速工具！
1 简介 Conda作为使用最为广泛的数据科学环境管理工具,可以协助我们很方便的完成创建管理环境.下载安装第三方库.软件包等操作,但其在下载资源的过程中下载速度时常令人捉急,即使使用连接速度更快的国内 ...
- Netty 源码解析（二）：Netty 的 Channel
本文首发于微信公众号[猿灯塔],转载引用请说明出处 接下来的时间灯塔君持续更新Netty系列一共九篇 Netty源码解析(一):开始 当前:Netty 源码解析(二): Netty 的 Channel ...