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 ...
随机推荐
- linux环境下搭建Jenkins持续集成（Jenkins+git+shell+maven+tomact）
准备环境 jenkins.war包 ,jdk1.8 ,tomact , maven,git 1.Jenkins war包,下载地址https://jenkins.io/zh/download/ ...
- Jmeter Response Data 乱码问题解决方法
1. 进入jmeter\apache-jmeter-4.0\bin,打开jmeter.properties 2. 搜索“sampleresult.default.encoding” 设置sampler ...
- SSL/TSL 原理（ 握手原理和传输原理）
本文参考<计算机网络 自顶向下方法> 目录 背景 通信的4要素 SSL/TLS in Detail 通讯保证 The Handshake Protocol 1. Initial Clien ...
- java基础 内部类详解
什么是内部类? 1.内部类也是一个类: 2.内部类位于其他类声明内部. 内部类的常见类型 1.成员内部类 2.局部内部类 3.匿名内部类 4.静态内部类 简单示例 /** * 外部类 * */ pub ...
- cookie和session及token
cookie,session傻傻分不清楚? 做了这么多年测试,还是分不清什么是cookie,什么是session?很正常,很多初级开发工程师可能到现在都搞不清什么是session,cookie相对来说 ...
- (七) SpringBoot起飞之路-整合SpringSecurity（Mybatis、JDBC、内存）
兴趣的朋友可以去了解一下前五篇,你的赞就是对我最大的支持,感谢大家! (一) SpringBoot起飞之路-HelloWorld (二) SpringBoot起飞之路-入门原理分析 (三) Sprin ...
- js语法基础入门（3）
3.数据类型 3.1.数据类型学习重点 前面我们通俗的讲了,数据类型其实就是对数据进行了分类,那么,在js中到底把数据分成了几类?这些类的名称叫什么?每个分类下面有那些值?这些问题是需要记清楚的,例如 ...
- 用JQuery解析获取JSON数据
JSON 是一种比较方便的数据形式,下面使用$.getJSON方法,实现获得JSON数据和解析,都挺方便简单的.从http://api.flickr.com/services/feeds/photos ...
- 编译Spring5.2.0源码
下载 spring-framework-5.2.0.RELEASE.zip https://github.com/spring-projects/spring-framework/releases 下 ...
- Centos 下 Jenkins2.6 + Git + Maven Shell一件部署与备份
使用Jenkins2.6 集成Maven与Git插件做持续集成,同时编写Shell脚本备份与发布(需要稍微知道点Linux/毕竟基于Centos PS:本人Linux也是菜鸡) - 下载Jenkins ...