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的更多相关文章

  1. 移动端rem.js的使用方法

    下面的代码一是我根据rem的使用经验,自己写的一个rem.js,发现很好用,能适用所有移动端h5页面的自适应需求: 代码一: window.onload = function(){ /*720代表设计 ...

  2. 移动端rem.js使用方法

    下面的代码一是我根据rem的使用经验,自己写的一个rem.js,发现很好用,能适用所有移动端h5页面的自适应需求: 代码一: ``` window.onload = function(){ /*720 ...

  3. 移动端适配rem为单位的rem.js及个别设备设置了大字体模式,导致页面变形的处理方式

    这段时间内,涉及到的都是移动端开发,说到移动端开发,我们就会思考到,目前分辨率的问题,如果用px为单位的话,在不同移动设备和不同分辨率下,页面的效果可能会有所不同,甚至导致页面变形.所以在次我们就用到 ...

  4. rem.js的用法及在浏览器端的适配

    首先介绍下自己,我是从后端转前端,对于前端的见识还不深望各位全当一个新手自述....... 随着移动设配的更新换代,市场上涌现了大量的非主流设备分辨率,比如华为手机...... 更新换代快的大前提下自 ...

  5. 谈谈我的移动端rem适配方案

    最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...

  6. 自适应rem.js

    用rem.js来实现自适应屏幕大小,要注意border不用rem做单位  代码如下: (function (doc, win) { //orientationchange : 判断手机是水平方向还是垂 ...

  7. vue移动端flexible.js结合Muse-ui使用和vux的小坑

    因为公司有个项目有webapp的需求,在前期准备的期间考虑过使用ionic,毕竟该项目web端的框架使用的是Angular,项目组的人也都比较熟悉,但是我们毕竟只是做个移动的网页,不想用ionic那么 ...

  8. 第130天:移动端-rem布局

    一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...

  9. 移动端rem适配屏幕

    九月已成历史,十月如期而至...可能是九月工作比较清闲,周记就没怎么写,十月决不能这么堕落,立贴为证,至少保证5篇博客!!!如果没学到什么新知识,就对以往的那些工作中常用到的知识点做个总结...话不多 ...

随机推荐

  1. php代码没解析成功

    在Apache中加载PHP模块 1.打开Apache的配置文件httpd.conf(位于Apache2\conf 目录下). 2.查找 “#LoadModule ssl_module modules/ ...

  2. CTF-Keylead(ASIS CTF 2015)

    将keylead下载到本地用7-ZIP打开,发现主要文件 keylead~ 在ubuntu里跑起来,发现是个游戏,按回车后要摇出3,1,3,3,7就能获得flag. 拖进IDA 直接开启远程调试,跑起 ...

  3. MVC 记录

    ASP.NET MVC框架提供了一个帮助我们构造Html元素的类:TagBuilder ps url cnblogs.com/yibinboy/articles/5187682.html HttpRu ...

  4. Ogre源码学习-Image和Texture

    以下文字来自源码注释: Image类:保存未压缩的图片数据,是唯一一个可以加载纹理的类.Image对象调用Codec对象来为图片数据解码. 通常,当在图片被加载前需要对它进行额外的处理,或者你想把它复 ...

  5. Docker(一) 简介

    简介 Docker是一款针对程序开发人员和系统管理员来开发.部署.运行应用的一款虚拟化平台.Docker 可以让你像使用集装箱一样快速的组合成应用,并且可以像运输标准集装箱一样,尽可能的屏蔽代码层面的 ...

  6. 浅谈DFS,BFS,IDFS,A*等算法

    搜索是编程的基础,是必须掌握的技能.--王主任 搜索分为盲目搜索和启发搜索 下面列举OI常用的盲目搜索: 1.dijkstra 2.SPFA 3.bfs 4.dfs 5.双向bfs 6.迭代加深搜索( ...

  7. Spring注解开发系列Ⅳ --- 属性赋值

    在Spring框架中,属性的注入我们有多种方式,我们可以通过构造方法注入,可以通过set方法注入,也可以通过p名称空间注入,方式多种多样,对于复杂的数据类型比如对象.数组.List集合.map集合.P ...

  8. python中Threadlocal变量

    在多线程环境下,每个线程都有自己的数据.一个线程使用自己的局部变量比使用全局变量好,因为局部变量只有线程自己能看见,不会影响其他线程,而全局变量的修改必须加锁. 不加锁就会出现变量会被修改的问题,进而 ...

  9. 啥?你想diy一个智能音箱,来吧

    没错,这是智zhang语音助手 本系统基于自美系统二次开发,添加连接EMQ服务器,语音远程控制LED(Nodemcu),当然也可以扩展控制更多的设备,只需要将下位机设备连接到EMQ服务器即可. 由于使 ...

  10. centos 配置自动启动(nginx为例)

    [Unit] Description=nginx After=network.target [Service] Type=forking ExecStart=/usr/local/nginx/sbin ...