/*
  doc:不用管:document对象
  win:不用管:window对象
  design:注意:设计稿的尺寸/物理像素
*/
(function (doc, win,design) {
// alert(123)
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>design){
docEl.style.fontSize = 100 * (clientWidth / design) + 'px';
}
else if(clientWidth==design){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / design) + 'px';
}
}; if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window,375); /*
window.onload = function() {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 320 * 20 + 'px';
window.onresize = function() {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 320 * 20 + 'px';
};
};
*/

移动端rem布局屏幕适配插件(放js中便可使用)的更多相关文章

  1. 移动端rem布局的适配mixin【转藏】

    /*================================================================ 以下为基于ip5 宽度320做的适配,标准html{font-si ...

  2. 分享一个移动端rem布局的适配mixin

    /*================================================================ 以下为基于ip5 宽度320做的适配,标准html{font-si ...

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

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

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

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

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

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

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

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

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

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

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

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

  9. 移动端rem布局实现(vw)

    什么是rem?在W3C官网上是这样描述的:“font size of the root element (根元素的字体大小)”.就是说rem是相当于html的,因为网页的默认字体大小是 16px,所以 ...

随机推荐

  1. VS2008 项目启动时报:“无法直接启动带有类库输出类型的项目”

    解决办法一: 右击要解决方案项目--属性-通用属性—单启动项目 解决方法二:直接选中界面类,右击设为启动项目, 如果还是这样,那么在此项目上按右键 (VS2010的资源管理工具中),点属性,更改设置.

  2. SVG.JS 画弧线

    需求描述: 使用svg.js,绘制一个弧线.下图绿色弧线. 准备工作: 1.了解SVG Path中的A指令 详细文档,请戳这里 给定x半径.y半径后,经过指定的两点,可以有2个椭圆,因此两点间有2条弧 ...

  3. python+selenium元素定位——8种方法

    定位元素,selenium提供了8中元素定位方法: (1)find_element_by_id() :html规定,id在html中必须是唯一的,有点类似于身份证号 (2)find_element_b ...

  4. Python基础-7.1字符串的格式化

    字符串格式化 Python的字符串格式化有两种方式: 百分号方式.format方式 百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存.[PEP-310 ...

  5. [Python3 练习] 001 温度转换1

    题目:温度转换 I (1) 描述 温度的刻画有两个不同体系:摄氏度 (Celsius) 和华氏度 (Fabrenheit) 请编写程序将用户输入的华氏度转换为摄氏度,或将输入的摄氏度转换为华氏度 转换 ...

  6. Java中获取大小:length、length()、size()

    1. java 中的 length 属性是针对数组说的,比如说你声明了一个数组,想知道这个数组的长度则用到了 length 这个属性. 2. java 中的 length() 方法是针对字符串说的,如 ...

  7. jdk 1.7 新增

    二进制整数 JDK7提供了二进制整数的类型,只要以0b开头即可.int a = 0b0101; 下划线分隔符 针对特别长的数字,读懂它令人头疼,这时候用下划线分割数字,可增加代码可读性.long a ...

  8. 初学css list-style属性

    网上很多css布局中会看到这样的一句:list-style:none: 那么list-style到底什么意思?中文即:列表样式:无: 其实它是一个简写属性,包含了所有列表属性,具体包含list-sty ...

  9. 打乱一个排好序的 list 对象 alist?

    1. import random 2. random.shuffle(alist)

  10. python数据结构:numpy

    一. numpy概述 numpy(Numerical Python)提供了python对多维数组对象ndarray(应该是N-dimension array)的支持,具有矢量运算能力,快速.节省空间. ...