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 ...
随机推荐
- centos 6.5 上安装jdk
1.首先明确自己的电脑上32位还是64位,自己的电脑是32位 2.下载jdk进入到oracle公司的主页 把页面拖到最下面 点击上面这个就可以下载以前比较低的版本 这里选择 32位的源码包的方式,将源 ...
- java读写Excel模板文件，应用于负载均衡多个服务器
首先,需要大家明白一点,对于多服务器就不能用导出文件用a标签访问链接方式去导出excel文件了,原因相信大家也明白,可能也做过尝试. 现在开始第一步:get请求,productPath 为你的项目路径 ...
- Django实现图片上传并前端页面显示
Django实现图片上传和图片显示 开始之前我们先确认环境中已经安装了Pillow,如果没有安装,可以通过pip install Pillow来安装,这个是python的图像处理库 数据库设置 我们创 ...
- .NET Core加解密实战系列之——消息摘要与数字签名算法
目录 简介 功能依赖 消息摘要算法 MD算法 家族发展史 应用场景 代码实现 MD5 示例代码 SHA算法 应用场景 代码实现 SHA1 SHA256 示例代码 MAC算法 HMAC算法的典型应用 H ...
- 服务消费者（Ribbon）
上一篇文章,简单概述了服务注册与发现,在微服务架构中,业务都会被拆分成一个独立的服务,服务之间的通讯是基于http restful的,Ribbon可以很好地控制HTTP和TCP客户端的行为,Sprin ...
- css3盒子模型中的box-sizing属性的使用_box sizing常用的3种属性
box-sizing属性用来定义元素的width和height所表示的区域,该属性一般有三种值:content-box.border-box.inherit.其中inherit表示box-sizing ...
- 【Linux】CentOS7 常用命令集合
CentOS7 常用命令集合 常用命令 文件与目录 操作命令解析 cd /home 进入 ‘/home’ 目录cd .. 返回上一级目录cd ../.. 返回上两级目录cd - 返回上次所在目录cp ...
- 隐写术工具之binwalk
0x00Binwalk介绍 Binwalk是用于搜索给定二进制镜像文件以获取嵌入的文件和代码的工具. 具体来说,它被设计用于识别嵌入固件镜像内的文件和代码. Binwalk使用libmagic库,因此 ...
- 用Kubernetes部署Springboot或Nginx，也就一个文件的事
1 前言 经过<Maven一键部署Springboot到Docker仓库,为自动化做准备>,Springboot的Docker镜像已经准备好,也能在Docker上成功运行了,是时候放上Ku ...
- Quartz.Net系列（十一）：System.Timers.Timer+WindowsService实现定时任务
1.创建WindowsService项目 2.配置项目 3.AddInstaller(添加安装程序) 4.修改ServiceName(服务名称).StartType(启动类型).Description ...