自适应rem.js

最新推荐文章于 2023-08-22 19:44:36 发布

weixin_30920597

最新推荐文章于 2023-08-22 19:44:36 发布

阅读量62

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yueliangcl/p/6930402.html

本文介绍使用rem.js实现屏幕自适应的方法，并讨论了在不同设备上如何动态调整字体大小，确保良好的用户体验。同时对比了使用px和rem作为单位的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用rem.js来实现自适应屏幕大小，要注意border不用rem做单位

代码如下：

 1 (function (doc, win) {
 2 //orientationchange : 判断手机是水平方向还是垂直方向，感应方向
 3  
 4 //doc ==》 document对象
 5 //doc.documentElement ==> 得到文档的根元素--> <html>
 6 //之所以要得到文档的根元素，是为了计算网页所打开时屏幕的真实宽度
 7 var docEl = doc.documentElement,
 8 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
 9 recalc = function () {
10 var clientWidth = docEl.clientWidth;
11 //获取不同移动端设备上的宽度
12 if (!clientWidth) return;
13 //320 是我们默认的手机屏幕
14 //clientWidth 是我们页面打开时所得到的屏幕（可看见页面的真实宽度）宽度真实的宽度值
15 //这两者相除得到一个放大或缩小的比例值
16 //320 ip5 --> 20px
17 //375 ip6
18 //414 ip6s --> 25px;
19 //width:2rem;
20 docEl.style.fontSize = 20 * (clientWidth / 750) + 'px';//750是iphone6像素的二倍
21 //设置根元素font-size 10.4167px
22 };
23 /*600px
24 20 * 600/320 -- > [2 -- 3] 放大范围
25  
26 200/320 -- > [0.5 -- 0.1] 缩小*/
27 if (!doc.addEventListener) return;
28 win.addEventListener(resizeEvt, recalc, false);
29 doc.addEventListener('DOMContentLoaded', recalc, false);
30 //当dom加载完成时，或者 屏幕垂直、水平方向有改变进行html的根元素计算
31 })(document, window);
32  
33 //如果你不想进行一个响应式设计的开发，你可以直接把font-size写死

后来看了一篇文章http://www.w3cplus.com/css/when-to-use-em-vs-rem.html

里面提到，结合 rem 单位的方式给html元素设置了一个固定的px单位，这种很普遍的做法，改变html元素的字体大小时，可以使整个页面做相应调整。但是，它重写继承了用户设置的浏览器字体大小。更夸张的说，这剥削了用户自行调整以获得最佳视觉效果的能力。

他建议：如果确实需要更改 html 元素的字体大小，那么就使用em，rem单位，这样根元素的值还会是用户浏览器字体大小的乘积。这将允许您通过更改您的 html 元素的字体大小，调整你的设计，但仍会保留用户的浏览器设置的效果。

按照我的理解，上述代码就可以修改为：

 1 (function (doc, win) {
 2   //orientationchange : 判断手机是水平方向还是垂直方向，感应方向
 3 
 4   //doc ==》 document对象
 5   //doc.documentElement ==> 得到文档的根元素-->  <html>
 6   //之所以要得到文档的根元素，是为了计算网页所打开时屏幕的真实宽度
 7   var docEl = doc.documentElement,
 8     resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
 9     recalc = function () {
10       var clientWidth = docEl.clientWidth;
11       //获取不同移动端设备上的宽度
12       if (!clientWidth) return;
13       //320 是我们默认的手机屏幕 
14       //clientWidth 是我们页面打开时所得到的屏幕（可看见页面的真实宽度）宽度真实的宽度值
15       //这两者相除得到一个放大或缩小的比例值
16       //320 ip5 --> 20px
17       //375 ip6
18       //414 ip6s --> 25px;
19       //width:2rem;
20       docEl.style.fontSize = 1.25 * (clientWidth / 750) + 'rem';//单位变成了rem
21       //设置根元素font-size 10.4167px
22     };
23     /*600px
24     20 * 600/320  -- >  [2 -- 3] 放大范围
25 
26     200/320 -- > [0.5 -- 0.1] 缩小*/
27   if (!doc.addEventListener) return;
28   win.addEventListener(resizeEvt, recalc, false);
29   doc.addEventListener('DOMContentLoaded', recalc, false);
30   //当dom加载完成时，或者 屏幕垂直、水平方向有改变进行html的根元素计算
31 })(document, window);
32 
33 //如果你不想进行一个响应式设计的开发，你可以直接把font-size写死