// rem布局适配
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 750) {
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

移动端rem布局 js的更多相关文章

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

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

  2. 移动端REM布局模板(阿里高清方案)

    移动端REM布局模板(阿里高清方案),蛮好的,转自: http://www.jianshu.com/p/985d26b40199 . <!DOCTYPE html> <html la ...

  3. 移动端Rem布局注意事项

    1.布局的总体结构框架:      2.注意事项: (a):如果是左右两栏的布局方式,须在article的同级加一个aside: 因为是同级,所以必须设置同样的样式:而且他俩的父级,也就是sectio ...

  4. 一看就懂得移动端rem布局、rem如何换算

    这里使用了js控制根元素的font-size大小,然后进行rem换算,在js代码后面会说明以下问题. 1.如何进行rem运算? 2.如果纯js控制根元素用rem布局会出现的小问题,如何解决? 3.如有 ...

  5. 移动端rem布局雪碧图解决方案 以及分享腾讯团队的在线雪碧图工具

    先分享一下地址:http://alloyteam.github.io/gopng/ 使用的方法也很简单,将需要的小图标拖进去,全部拖进去后再调位置(每拖一个进去都会帮你排列好,但是没有间隔,所以全部拖 ...

  6. 第132天:移动web端-rem布局(进阶)

    rem布局(进阶版) 该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport ...

  7. 移动端rem布局和百分比栅格化布局

    移动端的rem: 使用方法: 设置html的font-size,根据浏览器分辨率缩放 设置根元素font-size为100px这样好用的值,不要设为10px这样的: 然后获取浏览器的分辨率,也就是视口 ...

  8. 关于移动端 rem 布局的一些总结

    [资源一]基础知识恕不回顾 基础知识参考以下两篇博客: http://isux.tencent.com/web-app-rem.html http://www.w3cplus.com/css3/def ...

  9. 关于移动端rem 布局的一些总结

    1.rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位 2.为什么web app要使用rem? 实现强大的屏幕适配布局(淘宝,腾讯,网 ...

随机推荐

  1. linux设备驱动程序_hello word 模块编译各种问题集锦

    在看楼经典书籍<linux设备驱动程序>后,第一个程序就是编写一个hello word 模块. 原以为非常easy,真正弄起来,发现问题不少啊.前两天编过一次,因为没有记录,今天看的时候又 ...

  2. P1656 炸铁路

    P1656 炸铁路 81通过 286提交 题目提供者kkksc03 标签图论搜索/枚举洛谷原创 难度普及+/提高 提交该题 讨论 题解 记录 最新讨论 暂时没有讨论 题目描述 因为某国被某红色政权残酷 ...

  3. football statistics

    https://www.whoscored.com/Players/24328/Show/Edinson-Cavani

  4. Linux ALSA声卡驱动之六:ASoC架构中的Machine

    前面一节的内容我们提到,ASoC被分为Machine.Platform和Codec三大部分,其中的Machine驱动负责Platform和Codec之间的耦合以及部分和设备或板子特定的代码,再次引用上 ...

  5. 在Sql Server触发器中判断操作是Insert还是Update还是Delete

    在Sql Server触发器中判断操作是Insert还是Update还是Delete DECLARE    @IsInsert bit,    @IsUpdate bit,    @IsDelete  ...

  6. C# 学习笔记 三层架构系列(控件一)

    下面是我两周的学习总结:这是我写给自己的,如果哪位朋友有幸看到这篇文章就是缘分.如果所说的内容不对,就请纠正.勿喷!!! 想要将两周的学习知识通过文字.通过代码.通过图片储备起来,以防自己那天思维短路 ...

  7. IDEA Spark程序报错处理

    错误一: // :: ERROR Executor: Exception ) java.lang.NoSuchMethodError: scala.Product.$init$(Lscala/Prod ...

  8. 【高德地图API】VS2012或者VS2013添加高德地图v2.1.1版本SDK失败

    可能由于v2.1.1版本SDK可能是在Win8.1环境下编译[这里有许多的原因,系统升级,安装VS2013等等] 有童鞋在操作正常的情况下添加SDK失败,提示版本不兼容. 如下图: 编辑项目  *.c ...

  9. 72. js EXTJS grid renderer用法

    转自:https://blog.csdn.net/shancunxiaoyazhi/article/details/22156083 renderer : Function (可选的)该函数用于加工单 ...

  10. java将JSON字符串转换为实体类对象,基于net.sf.json实现

    @SuppressWarnings("unchecked") public static <T> T jsonToObject(String jsonString, C ...