我的web前端工作日记3------rem适配手机端

最新推荐文章于 2021-04-02 23:58:34 发布

dreamer_sen

最新推荐文章于 2021-04-02 23:58:34 发布

阅读量2.7k

点赞数 9

分类专栏：我的web前端工作日记文章标签： web前端手机适配 rem 前端开发前端经验

本文链接：https://blog.youkuaiyun.com/dreamer_sen/article/details/82149919

版权

18 篇文章

订阅专栏

来点干货。

1.什么是rem

rem是指根元素（root element）的字体大小。来看一下例子：

通过上面的例子我们可以看出1rem的值的大小取决于根元素html的字体大小。

假设是这样的

PC端和手机端查看的结果是不一样的

上图的字体是一样大的，只是图的缩放倍数不一样

可以看到，如果我们固定像素，那这个字的大小是不会随着屏幕变小而变小的，但如果我们用了rem，就可以解决这个问题了。

根据上面的例子，我们就可以找到解决问题的关键：界面要想适配不同屏幕，就需要根据屏幕调节1rem值的大小，屏幕大的1rem值大一些，反之则小。

答案是通过屏幕大小来改变根标签（html标签）的font-size

那我们首先就要获取到屏幕大小：

var deviceWidth = document.documentElement.clientWidth;

在pc端其实我们会设置最大宽度的，不然你可以想象你的整个电脑屏幕成了手机屏幕，估计没人愿意浏览这样的网页了。

这个设置我们一般会写在body标签中：

 html{font-size:100px;}
 body{
    width: 6.4rem;
    max-width: 640px;
    margin: 0 auto;
 }

因为是在pc端开始开发的，所以设置宽度为6.4rem，即为640px（公司规定的，现在流行的是750px）

现在在PC端1rem就是100px，在手机端其实也还是。接下来就要对这个值（html标签的字体大小）进行处理

var deviceWidth = document.documentElement.clientWidth > 640 ? 640 : document.documentElement.clientWidth;

三元运算：如果屏幕宽度大于640则设置为640，否则设置为本身宽度

接下来就要根据deviceWidth这个值来改变html标签的文字大小

document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';

这个6.4从哪里来的？建议你自己思考一下。如果你不懂欢迎你评论问我，哈哈。

rem的原理（我所理解的）：就是通过改变根标签的字体大小来实现适配的，其实就是选定了一个标准，这个标准需要根据屏幕大小的变化而变化，所以得有代码辅助。