function resi() {
var html = document.querySelector("html");
var wW = document.body.clientWidth || document.documentElement.clientWidth;
var maxW = 640;
var minW = 320;
if (wW > maxW) wW = maxW;
var ratio = wW / minW;
html.style.fontSize = 50 * ratio + "px"
}
window.addEventListener("DOMContentLoaded", function() {
var bodys = document.querySelector("body").style;
bodys.opacity = "1";
bodys.filter = "alpha(opacity=100)";
resi()
});
window.addEventListener("resize", resi);

  

移动端rem自适应布局关键代码的更多相关文章

  1. 移动端rem自适应布局(切图)

    本篇适用于初次使用rem为单位切图而无从下手的童鞋.核心是根据屏幕动态改变根元素字体大小,以达到适配各种屏幕.这只是一个拿来就用的教程.很多东西没有详细说明.不过对于快速做手机端切图很有帮助. 模板: ...

  2. 【转载】rem自适应布局-移动端自适应必备

    原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不 ...

  3. rem自适应布局的回顾总结

    使用rem实现自适应布局,应该算是当前移动前端的一大趋势,有些人对此还有点迷惑,搞不懂rem是如何实现自适应布局,如何根据设计稿来调整rem的值?rem布局如何用雪碧背景图片?rem一定要加载JS吗? ...

  4. 【转】rem自适应布局

    rem自适应原理 rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局.更多介绍请看这篇文章:rem是 ...

  5. rem自适应布局

    rem自适应原理 rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局.更多介绍请看这篇文章:rem是 ...

  6. 移动端rem适应布局

    移动端rem适应布局 rem rem(root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素(html)设置font-s ...

  7. 移动端rem适配布局

    dome如下: <!doctype html><html><head> <meta charset="UTF-8" /> <m ...

  8. rem自适应布局小结001

    在最近的移动端布局当中,最炙手可热的方式便是使用rem进行元素的布局.以下便是从最近的文章中所总结出来的一点东西. 首先,我们必须有以下的疑问: rem的本质是什么? rem如何实现自适应布局? 如何 ...

  9. Html5移动端页面自适应布局详解(阿里rem布局)

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后 大概viewport可以理解为三种 1.layout viewport  ...

随机推荐

  1. 解决Xshell和vim中文乱码(转载)

    From:http://blog.csdn.net/lovey599/article/details/7275403 一般而言,乱码多是由于编码问题引起 的,在windows系统中,大多数情况下中文编 ...

  2. Tomcat发布项目时,浏览器地址栏图标的问题

    最近在做一个Java网络应用程序,服务器是tomcat.在默认情况下,当用户访问该网络应用时,地址栏图标显示为tomcat猫.我希望把它换成自己的图标,于是研究了一下.在研究过程中,我发现网上的资料大 ...

  3. 如何构建日均千万PV Web站点

    http://www.cnblogs.com/xiaocen/p/3723839.html http://www.cnblogs.com/xiaocen/p/3726763.html http://w ...

  4. jquery on off 方法

    $("p").on("click",function(){alert("The paragraph was clicked.");}); $ ...

  5. oracle 导入数据

    1.在数据库中建立实例数据库之后,运行cmd 2.键入 imp空格(实例数据库名)/(实例数据库口令)空格file=“拖入数据地址” 比如czt.dmp文件直接拖进去(空格)full=y 3.按ent ...

  6. 配置IISExpress允许外部访问

    1.找到IISExpress的配置文件,位于 <文档>/IISExpress/config文件夹下,打开applicationhost.config,找到如下代码: <site na ...

  7. 山东省第三届ACM省赛

    Solved ID PID Title Accepted Submit   A 2407 Impasse (+) 0 0   B 2415 Chess 0 0   C 2414 An interest ...

  8. Reflect

    反射技术:其实就是动态加载一个指定的类,并获取该类中的所有的内容.而且将字节码文件封装成对象,并将字节码文件中的内容都封装成对象,这样便于操作这些成员.简单说:反射技术可以对一个类进行解剖. 反射的好 ...

  9. Arch-Linux-添加中文字体

    代码下载: Arch-Linux-添加中文字体.txt

  10. Android——inflate 将一个xml中定义的布局找出来

    通俗的说,inflate就相当于将一个xml中定义的布局找出来. 因为在一个Activity里如果直接用findViewById()的话,对应的是setConentView()的那个layout里的组 ...