html设置根rem,经过js动态设置根元素的rem方案
rem目前是响应式开发移动端一个很重要也是经常使用的一个元素,可是在网上看的各类文章都会超级懵逼。因此我在下面给出两个方案,也列举出使用方法,让你们一目了然。前提是设计稿以750为准。其中测试的设计稿中标注此div的width:750px;height:200px;javascript
方案一:css
window.addEventListener(('orientationchange' in window ? 'orientationchange' : 'resize'), (function() {
function c() {
var d = document.documentElement;
var cw = d.clientWidth || 750;
d.style.fontSize = (20 * (cw / 375)) > 40 ? 40 + 'px' : (20 * (cw / 375)) + 'px';
}
c();
return c;
})(), false);
html{font-size:10px}
*{margin:0;}
设计稿中标注此div的width:750px;height:200px;
换算为rem,即为width:18.75rem,height:5rem;
此时 1rem = 40px;将设计稿标注的宽高除以40便可获得rem的值。html
此时在iPhone6上测试,width:375px,也即width:100%。
方案二:java
!(function(doc, win) {
var docEle = doc.documentElement, //获取html元素
event = "onorientationchange" in window ? "orientationchange" : "resize", //判断是屏幕旋转仍是resize;
fn = function() {
var width = docEle.clientWidth;
width && (docEle.style.fontSize = 10 * (width / 375) + "px"); //设置html的fontSize,随着event的改变而改变。
};
win.addEventListener(event, fn, false);
doc.addEventListener("DOMContentLoaded", fn, false);
}(document, window));
html {
font-size: 10px;
}
*{
margin: 0;
}
设计稿中标注此div的width:750px;height:200px;
换算为rem,即为width:37.5rem,height:10rem;
此时 1rem = 20px;将设计稿标注的宽高除以20便可获得rem的值。web
test
以上两种方案均为经过js动态设置html的根元素的font-size的值来达到响应式的效果。app
最后一个为手淘的方案:测试
test
本文为原创文章,转载请保留原出处,方便溯源,若有错误地方,谢谢指正。
原文连接:经过js动态设置根元素的rem方案flex
html设置根rem,经过js动态设置根元素的rem方案相关推荐
- 实现js动态设置css样式,js动态设置全局样式主题色
需求: 1.设置一个全局的样式 2. 样式是需要动态改变的,改变的内容是通过请求后台接口获取的,因此需要js能够对css进行改变 实现: 或许你可能不相信,代码只需要几行 js代码: // 设置主题色 ...
- js动态设置文字大小
js动态设置文字大小 <script>function setRem() {var ui_w = 375;// 获取屏幕的宽度var clientWidth = document.docu ...
- js动态设置元素的宽高
js动态设置元素的宽高 实现代码: var html = document.getElementsByTagName('html')[0];var dl_second_nav=document.get ...
- 2)JS动态生成HTML元素的爬取
2)JS动态生成HTML元素的爬取 import java.util.List;import org.openqa.selenium.By; import org.openqa.selenium.We ...
- JS动态生成的元素,其对应的方法不响应(比如单击事件,鼠标移动事件等)...
主要原因:在页面给元素注册点击事件的时候[ $(function () { XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给 ...
- js动态生产html元素,js 动态创建 html元素
js 动态创建 html元素 js学习之动态创建html元素 body{margin:0;padding:0;} .sky{background:#000;width:1000;height:500p ...
- html动态资源加载进度,JavaScript_快速解决js动态改变dom元素属性后页面及时渲染的问题,今天实现一个进度条加载过程 - phpStudy...
快速解决js动态改变dom元素属性后页面及时渲染的问题 今天实现一个进度条加载过程,dom结构其实就是两个div 控制里层div的宽width属性,就能实现进度条往前走的效果. 我的进度条是显示下载文 ...
- 解决js动态改变dom元素属性后页面及时渲染问题
解决js动态改变dom元素属性后页面及时渲染问题 参考文章: (1)解决js动态改变dom元素属性后页面及时渲染问题 (2)https://www.cnblogs.com/fangsmile/p/49 ...
- 通过JS动态设置meta标签,根据手机屏幕分辨率自动缩放适配各手机(包括适配华为、oppo大屏幕手机、钉钉、微信)
JS动态添加meta标签,根据手机屏幕分辨率自动缩放适配各手机(包括适配华为.oppo大屏幕手机.钉钉.微信进入) 5月28晚上周四下班接了一个急活,一个面向国外的国际官方网站,三方适配+兼容.说是月 ...
最新文章
- 如何在Hadoop上运行TensorFlow【部署】
- Ubuntu 15.04 安装 boost-python
- MathType插入带序号公式的两种方法
- iOS开发那些悲剧的事儿
- 如何在微信公众帐号开发模式下,通过程序代码向用户发送符号表情。
- tomcat绿色版及安装版修改内存大小的方法
- linux系统Vsftpd搭建FTP
- 计算机无法屏保,Win7屏幕保护程序不能修改怎么办 win7无法设置电脑屏幕保护程序如何解决...
- 怎样更改itunes备份位置_iTunes备份路径在哪?iTunes备份路径如何修改
- html link 怎么设置密码,tplink路由器手机怎么设置密码?
- 《怦然心动》(Flipped) 观后感
- learn git branching学习整理
- 通过IIS安装包安装IIS
- 【大数据离线开发】1、大数据准备环境之Linux配置
- 本地小说阅读网站打造
- npm 安装依赖报错解决方法总结
- 关于浏览器UA的一些介绍
- VUE基础、表达式和指令
- dsp31段最佳调音图_31段均衡器调音
- 数控加工插补功能指令