Js移动端自适应代码_rem布局

发布时间:2021-03-19 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了Js移动端自适应代码_rem布局前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

rem 是 css 的长度单位,它是相对于 <html> 元素的 font-size 的相对值。假设 html { font-size: 20px; },那么 1rem 就等于 20px。

js代码

rem布局非常简单,首页你只需在页面引入这段原生js代码就可以了

(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',false);

})(document,window)

代码说明

1rem等于根元素font-size属性大小,所以我们要根据不同尺寸的手机通过改变根元素的font-size大小来做适配的,所引入以上js,直接在css中用rem单位即可。例如:750px的设计稿上量得某区域宽度为150px,css中宽度写法为:width:1.5rem;,即 150/750 rem。

总结


以上是前端之家为你收集整理的Js移动端自适应代码_rem布局全部内容,希望文章能够帮你解决Js移动端自适应代码_rem布局所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。