移动端rem自适应布局关键代码
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自适应布局关键代码的更多相关文章
- 移动端rem自适应布局(切图)
本篇适用于初次使用rem为单位切图而无从下手的童鞋.核心是根据屏幕动态改变根元素字体大小,以达到适配各种屏幕.这只是一个拿来就用的教程.很多东西没有详细说明.不过对于快速做手机端切图很有帮助. 模板: ...
- 【转载】rem自适应布局-移动端自适应必备
原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不 ...
- rem自适应布局的回顾总结
使用rem实现自适应布局,应该算是当前移动前端的一大趋势,有些人对此还有点迷惑,搞不懂rem是如何实现自适应布局,如何根据设计稿来调整rem的值?rem布局如何用雪碧背景图片?rem一定要加载JS吗? ...
- 【转】rem自适应布局
rem自适应原理 rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局.更多介绍请看这篇文章:rem是 ...
- rem自适应布局
rem自适应原理 rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局.更多介绍请看这篇文章:rem是 ...
- 移动端rem适应布局
移动端rem适应布局 rem rem(root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素(html)设置font-s ...
- 移动端rem适配布局
dome如下: <!doctype html><html><head> <meta charset="UTF-8" /> <m ...
- rem自适应布局小结001
在最近的移动端布局当中,最炙手可热的方式便是使用rem进行元素的布局.以下便是从最近的文章中所总结出来的一点东西. 首先,我们必须有以下的疑问: rem的本质是什么? rem如何实现自适应布局? 如何 ...
- Html5移动端页面自适应布局详解(阿里rem布局)
在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后 大概viewport可以理解为三种 1.layout viewport ...
随机推荐
- 【转】C++ 单例模式
http://blog.csdn.net/hackbuteer1/article/details/7460019 单例的一般实现比较简单,下面是代码和UML图.由于构造函数是私有的,因此无法通过构造函 ...
- Apache Thrift学习之二(基础及原理)
Apache Thrift 是 Facebook 实现的一种高效的.支持多种编程语言的远程服务调用的框架.本文将从 Java 开发人员角度详细介绍 Apache Thrift 的架构.开发和部署,并且 ...
- jsp自定义标签1
1.编写一个实现tag接口的java类 package cn.itcast.web.tag; import java.io.IOException; import javax.servlet.http ...
- MySQL处理数据库和表的常用命令
MySQL处理数据库和表的常用命令 [导读] 学习如何管理和导航MySQL数据库和表是要掌握的首要任务之一,下面的内容将主要对MySQL的数据库和表的一些常用命令进行总结,一些我们不得不掌握的命令,一 ...
- javascript代码注意事项
1 代码行末要加分好.原因<<javascript高级程序设计第三版21页第三行>> 2 初始化变量应该加上默认值因为使用typeof时 未声明和声明为初始化的值都返回unde ...
- git撤销命令
1 撤销工作区中master的修改 git checkout -- master.txt ,用暂存去覆盖工作区 2 git clean -n 查看哪些文件会被移除3 git clean -f 强制删除 ...
- 利用Hadoop实现超大矩阵相乘之我见(二)
前文 在<利用Hadoop实现超大矩阵相乘之我见(一)>中我们所介绍的方法有着“计算过程中文件占用存储空间大”这个缺陷,本文中我们着重解决这个问题. 矩阵相乘计算思想 传统的矩阵相乘方法为 ...
- 【转】oracle数据库中varchar2陷阱
源地址:http://www.cnblogs.com/iyangyuan/p/3491215.html oracle数据库相信大家都比较熟悉,数据库中有一种非常常用的数据类型:字符串型. 对应该类型, ...
- mybatis 入门二
1.新建一个java项目 2.加入mybatis.jar和mysql.jar 3.加mybatis的配置文件 mybatis.xml <?xml version="1.0" ...
- luvit 初尝鲜
官网:http://luvit.io/ Luvit is an attempt to do something crazy by taking node.js' awesome architectur ...