html {
font-size : 20px;
}
@media only screen and (min-width: 401px){
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px){
html {
font-size: 26.75px !important;
}
}
@media only screen and (min-width: 481px){
html {
font-size: 30px !important;
}
}
@media only screen and (min-width: 569px){
html {
font-size: 35px !important;
}
}
@media only screen and (min-width: 641px){
html {
font-size: 40px !important;
}
}

;(function (doc, win, undefined) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in win? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (clientWidth === undefined) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
if (doc.addEventListener === undefined) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window);

rem的js的更多相关文章

  1. 彻底搞好rem 与js的监控

    什么是rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对大小就可以实现自适应了,就不用什么 ...

  2. rem自适应js

    Rem自适应js---flexible.min.js   网上看到很多移动端适配的各种方法,由于原来工作中对rem的疏忽,所以决定重新学习rem~ 由于移动端特殊性,本文讲的是如何使用rem实现自适应 ...

  3. rem适配布局(rem+less+媒体查询 和 rem+flexible.js)

    1. rem 基础 rem 是一个相对单位,类似于 em ,em 是父元素字体大小. em 是相对于父元素  的字体大小来说的 rem 是相对于 html 元素 字体大小来说的 rem 优点 就是可以 ...

  4. 动态计算rem的js代码

    以最小1024尺寸为例: function rem() { var htmlEle = document.documentElement; var winWidth = htmlEle.clientW ...

  5. rem布局js实现

    (function(designWidth, maxWidth) { var doc = document, win = window; var docEl = doc.documentElement ...

  6. 移动端rem布局 js

    // rem布局适配 (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in ...

  7. Web移动前端开发-——rem+less+媒体查询,rem+flexble.js+媒体查询

    实际开发搞搞起来!!!! rem适配方案 媒体查询+rem+less 基础知识铺垫 第一步,我们需要拿到设计稿,安装设计稿的要求来设置一个合适的html字体大小. 第二步,计算元素大小的取值 页面re ...

  8. rem布局js设置,设置网页文档参考字体闭包函数

    (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? ...

  9. rem 响应 js函数

    size();window.onresize = function(){ size();}function size(){ var htnl_o=document.getElementsByTagNa ...

随机推荐

  1. IO流程中IO向量iovec

    作者:Younger Liu,本作品采用知识共享署名-非商业性使用-相同方式共享 3.0 未本地化版本许可协议进行许可. 为了提高从磁盘读取数据到内存的效率,引入了IO向量机制,IO向量即struct ...

  2. Github+yeoman+gulp-angular初始化搭建angularjs前端项目框架

    在上篇文章里面我们说到了Github账号的申请与配置 那么当你有了Github账号并创建了一个自己的Github项目之后,首要的当然是搭建自己的项目框架啦! 本人对自己的定位是web前端狗,常用开发框 ...

  3. hdu2444二分图最大匹配+判断二分图

    There are a group of students. Some of them may know each other, while others don't. For example, A ...

  4. Ajax第一课

    <script language="javascript"></script> Javascript 函数创建     function 函数名(){    ...

  5. js快速去除数组重复项

    function unique1(arr) { var tmp = new Array(); tmp.push(arr[0]); for(var i=0;i<arr.length;i++) { ...

  6. Oracle之分组函数嵌套以及表连接

    --1 数据环境准备 scott 用户下面的emp,dept表 --2 要求 :求平均工资最高的部门编号,部门名称,部门平均工资 select d.deptno,d.dname,e.salfrom(s ...

  7. Oracle的substr函数

    一.Substr函数 substr(目标字符串,开始位置,长度) 注意:这里第三个参数:长度,相当于物理中的标量,没有方向性,所以不能用负值.虽然不报错,但是选择不出任何值出来(欢迎指正) 开始位置可 ...

  8. Linux上rpm方式安装JDK1.7

    说明: 1.Linux版本 CentOS6.5_x86 2.Java版本 JDK1.7 32位的rpm包,所以是以rpm方式安装的java 3.可以使用yum install java从yum源中安装 ...

  9. 谷歌IAP:skusBundle array associated with key ITEM_ID_LIST cannot contain more than 20 items.

    这几天在接谷歌的支付,在拉谷歌商品列表的时候转菊花,长时间不返回(querySkuDetails),一开始以为因为IAP有key不对导致的,查了下发现没有问题. 再看logcat,发现了这行: Inp ...

  10. MyBatis之级联——一对多关系

    上次我们讲到了MyBatis的一对一关系的表示,简单回顾一下一对一关系就是一个学生只有一个学生证.那么什么是一对多关系呢?一个学生有多个课程这就是一对多的关系.我们结合上一章中的学生和学生证,在此基础 ...