移动端rem.js
rem 只与 html 的 font-size 有关,比如html{font-size: 16px} body{font-size: 62.5%},那么 1rem 还是 16px,与其他无关
在头部引入下面这段 js ,会根据屏幕宽度自动设置 html 的 font-size,设计图若是 750px 宽,则设计图上 100px 在 css 中换算为 1rem
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = (clientWidth >= 750 ? 100 : clientWidth / 7.5) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
移动端rem.js的更多相关文章
- 移动端rem.js的使用方法
下面的代码一是我根据rem的使用经验,自己写的一个rem.js,发现很好用,能适用所有移动端h5页面的自适应需求: 代码一: window.onload = function(){ /*720代表设计 ...
- 移动端rem.js使用方法
下面的代码一是我根据rem的使用经验,自己写的一个rem.js,发现很好用,能适用所有移动端h5页面的自适应需求: 代码一: ``` window.onload = function(){ /*720 ...
- 移动端适配rem为单位的rem.js及个别设备设置了大字体模式,导致页面变形的处理方式
这段时间内,涉及到的都是移动端开发,说到移动端开发,我们就会思考到,目前分辨率的问题,如果用px为单位的话,在不同移动设备和不同分辨率下,页面的效果可能会有所不同,甚至导致页面变形.所以在次我们就用到 ...
- rem.js的用法及在浏览器端的适配
首先介绍下自己,我是从后端转前端,对于前端的见识还不深望各位全当一个新手自述....... 随着移动设配的更新换代,市场上涌现了大量的非主流设备分辨率,比如华为手机...... 更新换代快的大前提下自 ...
- 谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
- 自适应rem.js
用rem.js来实现自适应屏幕大小,要注意border不用rem做单位 代码如下: (function (doc, win) { //orientationchange : 判断手机是水平方向还是垂 ...
- vue移动端flexible.js结合Muse-ui使用和vux的小坑
因为公司有个项目有webapp的需求,在前期准备的期间考虑过使用ionic,毕竟该项目web端的框架使用的是Angular,项目组的人也都比较熟悉,但是我们毕竟只是做个移动的网页,不想用ionic那么 ...
- 第130天:移动端-rem布局
一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...
- 移动端rem适配屏幕
九月已成历史,十月如期而至...可能是九月工作比较清闲,周记就没怎么写,十月决不能这么堕落,立贴为证,至少保证5篇博客!!!如果没学到什么新知识,就对以往的那些工作中常用到的知识点做个总结...话不多 ...
随机推荐
- lind.ddd博客笔记索引
先占位 整理 写博客呢 可以理解为一个动手的过程 写博客呢和实际动手也是一段差距
- 强大的 Python 任务自动化工具!invoke 十分钟入门指南
接着前面的<tox 教程>,以及刚翻译好的<nox文档>,我们继续聊聊 Python 任务自动化的话题. nox 的作者在去年的 Pycon US 上,做了一场题为<Br ...
- idea中使用Live Template自动生成方法所有参数打印
一 新建模板 二 设置代码模板 三 设置变量 表达式是支持groovy脚本的,所以这里写一个groovy脚本,生成给定格式的日志字符串,methodParameters()是idea内置的函数,获取方 ...
- maven远程部署到tomcat8服务器
maven远程部署到tomcat8服务器 环境准备 linux服务器一台 服务器安装JDK 服务器安装Tomcat 服务器Tomcat8配置 添加Tomcat权限 配置文件路径: tomcat/con ...
- CUDA学习(四)之使用全局内存进行归约求和(一个包含N个线程的线程块)
问题:使用CUDA进行数组元素归约求和,归约求和的思想是每次循环取半. 详细过程如下: 假设有一个包含8个元素的数组,索引下标从0到7,现通过3次循环相加得到这8个元素的和,使用一个间隔变量,该间隔变 ...
- python笔记13
今日内容 装饰器 推导式 模块[可选] 内容回顾 函数 参数 def (a1,a2):pass def (a1,a2=None):pass 默认参数推荐用不可变类型,慎用可变类型. def(*args ...
- Shell脚本深入教程(1):快速入门
Shell脚本基础入门 Bash注释 Bash只支持单行注释,使用#开头的都被当作注释语句: # 整行注释 echo hello world # 行尾注释 通过Bash的一些特性,可以取巧实现多行注释 ...
- 20190728三人开黑517codingACM模拟赛
三人组队开黑ACM膜你赛 果然我最蔡 我就写了ACF所以就写这些吧awa Problem A 人话:给你一个w×h的矩形蛋糕,然后告诉你两个蜡烛的坐标,两个蜡烛都在网格点上且不在蛋糕边缘,问如何切一刀 ...
- 数百个 HT 工业互联网 2D 3D 可视化应用案例分享 - 2019 篇
继<分享数百个 HT 工业互联网 2D 3D 可视化应用案例>2018 篇,图扑软件定义 2018 为国内工业互联网可视化的元年后,2019 年里我们与各行业客户进行了更深度合作,拓展了H ...
- High一下!
代码: <a title="把这个链接拖到你的Chrome收藏夹工具栏中" href='javascript:(function() { function c() { var ...