移动端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,所以 ...
随机推荐
- 应用安全-安全设备-Waf系列-软Waf-D盾
安装 下载http://www.d99net.net/down/d_safe_2.1.5.2.zip 使用说明 http://www.d99net.net/News.asp?id=106 免杀 arr ...
- == 和 equals的区别
== 和 equals的区别 基本类型:== 比较的是两个变量的面值大小 对象对象: 比较的是内存地址 特例: String a = "abc" String b = &qu ...
- python+selenium下拉列表option对象操作方法一
参考官方文档:https://selenium.dev/selenium/docs/api/py/webdriver_support/selenium.webdriver.support.select ...
- Leveldb源码分析--3
http://blog.csdn.net/sparkliang/article/details/8604416
- vue2.0 watch里面的 deep和immediate作用
deep,默认值是 false,代表是否深度监听.immediate:true代表如果在 wacth 里声明了之后,就会立即先去执行里面的handler方法,如果为 false就跟我们以前的效果一样, ...
- 创建客户端项目并读取服务化的配置中心(Consul + Spring Cloud Config)
创建客户端项目并读取服务化的配置中心 将配置中心注册到服务中心(Consul) POM文件添加依赖: <dependency> <groupId>org.springframe ...
- Leading and Trailing LightOJ - 1282 题解
LightOJ - 1282 Leading and Trailing 题解 纵有疾风起 题目大意 题意:给你一个数n,让你求这个数的k次方的前三位和最后三位. \(2<=n<2^{31} ...
- SCUT - 31 - 清一色 - dfs
https://scut.online/p/31 还是不知道为什么RE了.的确非常玄学. 重构之后就没问题了.果然写的越复杂,分的情况越乱就越容易找不到bug. #include<bits/st ...
- 音频视频的播放的进度调整(以.net为例)
Background:对于音视频在线播放,一些小应用是靠nginx处理访问视频.音频文件的请求,对外应用的一般会托管至各种云上使用相关的服务.前者存在巨大的安全隐患,后者会有一定的成本.有的时候还是需 ...
- Elasticsearch7.X 入门学习第三课笔记----search api学习(URI Search)
原文:Elasticsearch7.X 入门学习第三课笔记----search api学习(URI Search) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出 ...