移动端rem布局 js
// 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的更多相关文章
- 第130天:移动端-rem布局
一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...
- 移动端REM布局模板(阿里高清方案)
移动端REM布局模板(阿里高清方案),蛮好的,转自: http://www.jianshu.com/p/985d26b40199 . <!DOCTYPE html> <html la ...
- 移动端Rem布局注意事项
1.布局的总体结构框架: 2.注意事项: (a):如果是左右两栏的布局方式,须在article的同级加一个aside: 因为是同级,所以必须设置同样的样式:而且他俩的父级,也就是sectio ...
- 一看就懂得移动端rem布局、rem如何换算
这里使用了js控制根元素的font-size大小,然后进行rem换算,在js代码后面会说明以下问题. 1.如何进行rem运算? 2.如果纯js控制根元素用rem布局会出现的小问题,如何解决? 3.如有 ...
- 移动端rem布局雪碧图解决方案 以及分享腾讯团队的在线雪碧图工具
先分享一下地址:http://alloyteam.github.io/gopng/ 使用的方法也很简单,将需要的小图标拖进去,全部拖进去后再调位置(每拖一个进去都会帮你排列好,但是没有间隔,所以全部拖 ...
- 第132天:移动web端-rem布局(进阶)
rem布局(进阶版) 该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport ...
- 移动端rem布局和百分比栅格化布局
移动端的rem: 使用方法: 设置html的font-size,根据浏览器分辨率缩放 设置根元素font-size为100px这样好用的值,不要设为10px这样的: 然后获取浏览器的分辨率,也就是视口 ...
- 关于移动端 rem 布局的一些总结
[资源一]基础知识恕不回顾 基础知识参考以下两篇博客: http://isux.tencent.com/web-app-rem.html http://www.w3cplus.com/css3/def ...
- 关于移动端rem 布局的一些总结
1.rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位 2.为什么web app要使用rem? 实现强大的屏幕适配布局(淘宝,腾讯,网 ...
随机推荐
- jdk1.6下使用sardine和jackrabbit-webdav的问题
同步一个遇到的问题,前几天,客户给了一个server地址和usernamepassword.让把上面的文件,download到还有一台server上.我查了下,发现该server使用文件协议是webd ...
- Ubuntu12.04.3LTS安装Oracle Java 7
今天在ubuntu 12.04 LTS 上安装Matlab时总是出错,显示拷贝jar包(cp "xx.jar")出现错误,在网上搜索了一下发现原来是没有安装java.自己打算安装o ...
- Linux如何使用cURL分割下载大文件
Linux如何使用cURL分割下载大文件 - 51CTO.COM http://os.51cto.com/art/201508/489368.htm
- js对象和json的区别
他们两个没有什么关联只不过可以相互转换而已,就像json可以转化为java对象一样 注意:json只有字符串形式(就是我们常说的json字符串:key/value值和数组形式的字符串),没有什么jso ...
- ios6--UILabel
// // ViewController.m // 02-UILabel的使用 // // UILabel显示一段文字. #import "ViewController.h" @i ...
- 【Poj3241】Object Clustering
Position: http://poj.org/problem?id=3241 List Poj3241 Object Clustering List Description Knowledge S ...
- JSP-Runoob:JSP 链接数据库
ylbtech-JSP-Runoob:JSP 链接数据库 1.返回顶部 1. JSP 连接数据库 本教程假定您已经了解了 JDBC 应用程序的工作方式.在您开始学习 JSP 数据库访问之前,请访问 J ...
- sql简单学习---备忘
2:Hibernate public boolean deleteFlowerById(int id) { Session session = sessionFactory.openSession() ...
- nginx 反向跳转
语法规则: location [=|~|~*|^~] /uri/ { … }= 开头表示精确匹配^~ 开头表示uri以某个常规字符串开头,理解为匹配 url路径即可.nginx不对url做编码,因此请 ...
- IE版本的判断
var Sys = {};var ua = navigator.userAgent.toLowerCase(); var s;(s = ua.match(/msie ([\d.]+)/)) ? Sys ...