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. iframe替代方案

    自己写一个pagelet框架.封装成JSP的Taglib. <tms:view header="common-header" footer="common-foot ...

  2. tuple解包给类的构造函数

    首先我们的第一步当然是将tuple解包.tuple提供了一个get函数来获取第N个元素.例如: get<1>(make_tuple(...)); 要将一个tuple全部拆解,就可以使用通过 ...

  3. git config(转载)

    From:http://www.g2w.me/2013/10/cache-github-credential-for-https-repository/ http://openwares.net/li ...

  4. EventBroker

    Sample publisher Publish an event topic: ? 1 2 3 4 5 6 7 8 9 10 public class Publisher {     [EventP ...

  5. 轻量级的.Net ORM框架介绍

    轻量型 ORM 组件 FluentData 官网https://fluentdata.codeplex.com/ http://www.cnblogs.com/babietongtianta/p/43 ...

  6. mycat未配置对应表导致报错

    Caused by: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: can't find table define in sch ...

  7. SQL Server 2005中的分区表(三):将普通表转换成分区表(转)

    在设计数据库时,经常没有考虑到表分区的问题,往往在数据表承重的负担越来越重时,才会考虑到分区方式,这时,就涉及到如何将普通表转换成分区表的问题了. 那么,如何将一个普通表转换成一个分区表 呢?说到底, ...

  8. spring注解注入

    @Autowired public void setUserDAO(UserDAO userDAO) { this.userDAO = userDAO; } @Test public void tes ...

  9. Intellisense in Visual Studio for Microsoft Dynamics CRM 2016

    Intellisense in Visual Studio for Microsoft Dynamics CRM 2016 posted by dynamicsnick on may 18, 2016 ...

  10. Hibernate注解:一对多外键关联

    情形:两个表,cms_mode是主表,cms_model_field是子表,cms_model_field的model_id字段关联到cms_model的主键. # # Source for tabl ...