移动端rem布局屏幕适配插件(放js中便可使用)
/*
doc:不用管:document对象
win:不用管:window对象
design:注意:设计稿的尺寸/物理像素
*/
(function (doc, win,design) {
// alert(123)
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>design){
docEl.style.fontSize = 100 * (clientWidth / design) + 'px';
}
else if(clientWidth==design){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / design) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window,375);
/*
window.onload = function() {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 320 * 20 + 'px';
window.onresize = function() {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 320 * 20 + 'px';
};
};
*/
移动端rem布局屏幕适配插件(放js中便可使用)的更多相关文章
- 移动端rem布局的适配mixin【转藏】
/*================================================================ 以下为基于ip5 宽度320做的适配,标准html{font-si ...
- 分享一个移动端rem布局的适配mixin
/*================================================================ 以下为基于ip5 宽度320做的适配,标准html{font-si ...
- 第130天:移动端-rem布局
一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...
- 移动端REM布局模板(阿里高清方案)
移动端REM布局模板(阿里高清方案),蛮好的,转自: http://www.jianshu.com/p/985d26b40199 . <!DOCTYPE html> <html la ...
- 移动端Rem布局注意事项
1.布局的总体结构框架: 2.注意事项: (a):如果是左右两栏的布局方式,须在article的同级加一个aside: 因为是同级,所以必须设置同样的样式:而且他俩的父级,也就是sectio ...
- 第132天:移动web端-rem布局(进阶)
rem布局(进阶版) 该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport ...
- 关于移动端 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? 实现强大的屏幕适配布局(淘宝,腾讯,网 ...
- 移动端rem布局实现(vw)
什么是rem?在W3C官网上是这样描述的:“font size of the root element (根元素的字体大小)”.就是说rem是相当于html的,因为网页的默认字体大小是 16px,所以 ...
随机推荐
- Vue.js 注册组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 004/HyperLedger-Fabric(节点与channel关系)
HyperLedger:超级账本项目 一.Fabric中的节点 1.节点术语 [1].Orderers: 提供共识服务的网络节点,例如,使用Kafka或PBFT [2].Peers: 维护账本 ...
- 简述Vue中的计算属性
1.什么是计算属性 如果模板中的表达式存在过多的逻辑,那么模板会变得臃肿不堪,维护起来也异常困难,因此为了简化逻辑出现了计算属性: <template> <div id=" ...
- Linux 文件创建、插入、替换
创建文件 touch newfile.txt 插入字符串 echo "aaa" >>/newfile.txt 替换字符串 sed -i "s/aaa/ccc/ ...
- [转]JavaScript构造函数及原型对象
JavaScript中没有类的概念,所以其在对象创建方面与面向对象语言有所不同. JS中对象可以定义为”无序属性的集合”.其属性可以包含基本值,对象以及函数.对象实质上就是一组没有特定顺序的值,对象中 ...
- python基础-5 冒泡排序、递归
上节总结 一.上节内容补充回顾 1.lambda func = lambda x,y: 9+x 参数: x,y 函数体:9+x ==> return 9+x func: 函数名 def func ...
- xshell输入字母空格间距变大
按一下shift+空格(全角/半角转换的快捷键,引起的问题)
- idea / eclipse 批量 替换 空白行
1.选择Regular expression项,允许查询匹配正则表达式 2.在Find文本框输入正则表达式:^\s*\n , 点击ReplaceAll 转移字符 含义 ^ 否 * 0个或多个 \s ...
- Spring MVC-学习笔记(3)参数绑定注解、HttpMessageConverter<T>信息转换、jackson、fastjson、XML
1.参数绑定注解 1>@RequestParam: 用于将指定的请求参数赋值给方法中的指定参数.支持的属性: 2>@PathVariable:可以方便的获得URL中的动态参数,只支持一个属 ...
- c知识点总结2
函数 int func(int x){ //x:形式参数 .... } int main(){ .... int res=func(z); //z:实际参数 } 实参与形参具有不同的存储单元, 实参与 ...