// 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. 关于new和malloc以及delete和free能否够混用

    /* *1>当申请的空间是内置类型时,delete和free能够混用 *2>当申请的空间是自己定义类型时, *       1>若没有析构函数.delete和malloc能够混用.有 ...

  2. Object-C---&gt;Swift之(十一)属性观察者

    属性观察者机制能让程序在属性被赋值时获得运行代码的机会,用来监视属性的除初始化之外的属性值变化,当属性值发生改变时能够对此作出响应 详细包含两个特殊的回调方法: willSet(newValue):被 ...

  3. xcode 4.5 new feature __ ios6 新特性

    上两周看了wwdc 2012 developer session 400 - 412的视频,以下总结一下xcode4.5的新特性.(部分參考onevcat的文章,在此感谢.) @synthesize ...

  4. 改动grub默认启动顺序

    grub如今有两个版本号,一个grub,一个grub2,两个版本号的操作不太一样. 装centos的朋友非常有可能是grub.我电脑装的是ubuntu14.04,为grub2.我演示grub2的过程. ...

  5. cocos2d-x-3.1 数据结构之Vector (coco2d-x 学习笔记六)

    介绍 cocos2d::Vector<T>是一个封装好的能动态增长顺序訪问的容器. cocos2d::Vector<T>中的元素是按序存取的,它的低层实现数据结构是标准模版库中 ...

  6. php 把一个数组分成有n个元素的二维数组的算法

    一.第一种解法 <?php //把一个数组分成几个数组 //$arr 是数组 //$num 是数组的个数 function partition($arr,$num){ //数组的个数 $list ...

  7. Android 信息提示——Toast方式

    Toast用于向用户显示一些帮助/提示.一下列举了5中样式. 一.默认的效果(显示在屏幕的底部) 代码: Toast.makeText(getApplicationContext(), "默 ...

  8. In 7-bit

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3713 题意:给定一个字符串,首先输出这个字符串的长度(以两位的十六进制的形 ...

  9. Counterfeit Dollar

    http://poj.org/problem?id=1013 #include<stdio.h> #include<string.h> #include<math.h&g ...

  10. robotframework - 运行报错提示 No keyword with name 'Open Browser' found.

    用下面的例子为例: 1.输入以上robot脚本提示: 2.经查阅资料,大部分都使用的是selenium2 版本,无法解该的问题,目前小编使用的是selenium3,不知道selenium是哪个版本的话 ...