移动端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? 实现强大的屏幕适配布局(淘宝,腾讯,网 ...
随机推荐
- Fedora下克隆Octopress博客
我在自己的github上搭建了一个Octopress博客(http://songlee24.github.io/),用于不定期的写一些学习笔记和心得体会.但是有时候由于换了电脑或者重装了linux系统 ...
- 从头认识Spring-1.9 内部类注入Bean
这一章节我们来讨论一下内部类注入Bean. 1.domain 蛋糕类:(跟前一章节的一样) package com.raylee.my_new_spring.my_new_spring.ch01.to ...
- kentico11 教程,
create master page with css list menu Add the navigation menu Add a dynamic web part that will repre ...
- ssh连接超时问题解决方案,每一种方案都可以
1.服务端修改 vim /etc/ssh/sshd_config 修改 ClientAliveInterval 60 ClientAliveCountMax 40 60秒,向客户端发送一次请求. 超过 ...
- 分类(category)是门学问
分类的精细程度表现了人类的文明程度. 1. 学科分类 cybernetics:控制论:
- Spark 机器学习 ---TF-IDF
package Spark_MLlib import org.apache.spark.ml.feature.{HashingTF, IDF, Tokenizer} import org.apache ...
- Atlantis(坐标离散化)
http://poj.org/problem?id=1151 题意:给出矩形的左上角坐标和右下角坐标(坐标的y轴是向下的),求出矩形面积的并.. 今天好困啊..迷迷糊糊的听会神给讲了讲,敲完之后调试了 ...
- hash练习们
610. 数对的个数 ★★ 输入文件:dec.in 输出文件:dec.out 简单对比时间限制:1 s 内存限制:128 MB Description出题是一件痛苦的事情!题目看多了也 ...
- 【翻译】- EffectiveAkka-第二章(一)
Actor使用模式 现在我们已经了解了可以创建的actor系统的不同类型,那么我们在编写基于actor的应用程序时,可以采用什么样的使用模式,以便避免出现常见错误呢? 下面就让我们看看其中使用模式. ...
- SS配置,Brook是什么?,Brook如何配置(Android篇)
很长时间没有更新了,今天给大家分享一下什么是Brook,和SS有什么区别?写的不好,请勿见外,大佬绕过. Brook简单介绍 Brook 是一个高效的 Socks5 代理软件,官方支持Windows. ...