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 ...
随机推荐
- 解除git文件处于lock状态方法
解决办法: 去git文件夹下删除lock文件就可以
- C/S C# WPF锐浪报表教程
前言:锐浪报表是一种中国式报表的报表开发工具.博主使用锐浪报表有一段时间了,积累了一些经验希望能帮助你快速掌握并使用 第一章:集成项目 首先我们先去锐浪报表官网下载并安装锐浪报表. 创建WPF应用程序 ...
- Magicodes.IE在.NET Core中通过请求头导出多种格式文件
前言 在2.2里程碑中我们增加了一些新的功能,正如标题所写通过请求头进行导出我们不同格式的文件.下面我们来看一下如何使用.通过这种方式无论是对我们的数据多用途,还是说对我们的数据校验都做到了轻松易配. ...
- MySQL服务器是怎么处理客户端请求的
不论MySQL客户端进程和服务器进程是采用哪种方式进行通信,最后实现的效果都是:客户端进程向服务器进程发送一段文本(MySQL语句),服务器进程处理后再向客户端进程发送一段文本(处理结果).那服务器进 ...
- junit基本介绍视频笔记1
程序员每天工作的基本流程: 1.从svn检出代码: 2.运行单元测试,测试无误,进入下一步: 3.开始一天的代码编写工作: 4.代码提交到服务器之前进行单元测试: 5.单元测试通过提交到svn服务器. ...
- android中使用https是否对服务证书合法性校验的新的体会
package com.cetcs.logreport.utils; import android.content.Context; import org.apache.http.conn.ssl.S ...
- dart快速入门教程 （6）
6.内置操作方法和属性 6.1.数字类型 1.isEven判断是否是偶数 int n = 10; print(n.isEven); // true 2.isOdd判断是否是奇数 int n = 101 ...
- plsql启动报 Using filter for all users can lead to poor perform
首先,这个与Oracle配置无关,就是在使用pl/sql左侧树形目录时会看到非常多的和你当前工作无关的表,视图,序列等,导致打开速度慢. 解决办法:Tools-->Object browser ...
- python之os模块分类整理
OS模块简单介绍: 它是一个Python的系统编程的操作模块,可以处理文件和目录.比如查找文件或目录,对大量的路径与文件处理. 常用操作方法: os.name :指出当前你使用的操作平台,‘nt’代表 ...
- .NET 开源项目 StreamJsonRpc 介绍
StreamJsonRpc 是一个实现了 JSON-RPC 通信协议的开源 .NET 库,在介绍 StreamJsonRpc 之前,我们先来了解一下 JSON-RPC. JSON-RPC 介绍 JSO ...