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. SyntaxError: Non-UTF-8 code starting with '\xba' in file 错误的解决方法!!

    第一次在Eclipse建立python工程,添加了自己新建的文件,写了一点代码,随后执行时候出现了错误,和昨天我在Visual Studio 2015里面一样,错误: SyntaxError: Non ...

  2. 转: Ubuntu 安装字体方法

    命令安装:   以微软雅黑字体为例(其他的宋体.黑体等点阵字体都一样的),我们的雅黑字体文件是:Yahei.ttf(放在自己的主目录下)(在widows目录的Fonts目录下找需要的字体)由于我是双系 ...

  3. [Java] 03 String获取文件后缀名,判断文件是否合法

    package test.string; import java.util.Arrays; import java.util.List; public class GetFileType { priv ...

  4. [ActionScript 3.0] AS3 深入理解Flash的 应用程序域Application Domains

    简介 网上有很多flash,通常都不需要显示的使用应用程序域,因为默认的应用程序域就够用了.其实复杂的情况下需要用到应用程序域,比如说有两个不同的swf,一个是旧版本的,一个是新版的,这两个文件里的类 ...

  5. 网络编程socket

    socket socket解释 socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄. 应用程序通常通过"套接字"向网络发出请求或者应答 ...

  6. 4.1.1 A - Calendar(简单线性表)(日期查找)(数组应用)

    Description A calendar is a system for measuring time, from hours and minutes, to months and days, a ...

  7. JAVA设计模式之单一职责原则

    概念: 就一个类而言应该只有一个因其他变化的原因. 流程: 问题由来:设类或接口类C负责两个不同不同的职责:职责T1,职责T2.当由于职责T1需求改变进而需要修改类C时,可能导致职责T2收到不可预知的 ...

  8. 动手学servlet(二) servlet基础

    1.我们来试着向一个servlet提交一个表单,现在webcontent下新建一个login.html页面,其中action对应servelt类名,代码如下: <!DOCTYPE HTML PU ...

  9. POJ1298_The Hardest Problem Ever_最难的问题_Caesar 密码_C++

    题目:http://poj.org/problem?id=1298 好吧,给了题目也看不懂……给出翻译(题目名翻译是:最难的问题,233333) 这一看就是老师给出题解: 然而没有什么用哈 最快的办法 ...

  10. 0901~0907面试总结(腾讯CDC、金蝶)

    纯脑记,但应该不会差太多 20150901腾讯CDC面试(初级外包岗) 0826的上午先用QQ进行了初步沟通,要求做一个不考虑AI的井字棋游戏,0830上午E-mail上交了做好的DEMO,然后等了几 ...