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 ...
随机推荐
- Scrapy学习1：安装
Install Scrapy 熟悉PyPI的话,直接一句 pip install Scrapy 但是有时候需要处理安装依赖,不能直接一句命令就安装结束,这个和系统有关. 我用的Ubuntu,这里仅介绍 ...
- Error: Cannot find module 'webpack'
运行 npm start 报错 Error: Cannot find module 'webpack' 安装了 npm install --save-dev webpack cnpm install ...
- SpringBoot读取application.properties中文乱码
[本文版权归微信公众号"代码艺术"(ID:onblog)所有,若是转载请务必保留本段原创声明,违者必究.若是文章有不足之处,欢迎关注微信公众号私信与我进行交流!] 解决方案 在ID ...
- skywalking的插件管理agent管理
转载自博客:https://my.oschina.net/eacdy/blog/4304312/print Java Agent是插件化.可插拔的.Skywalking的插件分为三种: 引导插件:在a ...
- 【Spring】AOP的代理默认是Jdk还是Cglib？
菜瓜:你觉得AOP是啥 水稻:我觉得吧,AOP是对OOP的补充.通常情况下,OOP代码专注功能的实现,所谓面向切面编程,大多数时候是对某一类对象的方法或者功能进行增强或者抽象 菜瓜:我看你这个理解就挺 ...
- Python 简明教程 --- 14，Python 数据结构进阶
微信公众号:码农充电站pro 个人主页:https://codeshellme.github.io 如果你发现特殊情况太多,那很可能是用错算法了. -- Carig Zerouni 目录 前几节我们介 ...
- 实现MFC扩展DLL中导出类和对话框
如果要编写模块化的软件,就要对对动态链接库(DLL)有一定的了解,本人这段时间在修改以前的软件时,决定把重复用的类和对话框做到DLL中,下面就从一个简单的例子讲起,如何实现MFC扩展DLL中导出类和对 ...
- （1）RabbitMQ简介与安装
1.RabbitMQ简介 因为RabbitMQ是基于开源的AMQP协议来实现的,所以在了解MQ时候,首先我们来了解下AMQP协议.AMQP,即Advanced Message Queuing Prot ...
- JasperReport报表中输出Excel时，部分列不显示的问题
JasperReport开源报表功能强大,是我们WEB系统中做报表开发的一个强有力的工具,上手也比较简单.我碰到的问题是进行报表输出时,在html网页中显示正常,但如果导出为Excel时,部分列不显示 ...
- spark | 手把手教你用spark进行数据预处理
本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是spark专题的第七篇文章,我们一起看看spark的数据分析和处理. 过滤去重 在机器学习和数据分析当中,对于数据的了解和熟悉都是最基 ...