rem自适应布局用法及详解,rem布局使用

　　现在的手机种类繁多，iphone系列就更不用说了。安卓手机种类数不胜数，不可能给每一款手机都写一套布局风格，这也是不可能做到的。但是对于越来越好的前端，当然要找到合理的解决方案。Rem用于适应布局。

　　适配达到的效果，如下图所示(简单演示)

　　无论是大屏还是小屏，两个div占据了屏幕的一半。

　　虽然上面简单的百分比可以实现，但是百分比无法适应字体，要把百分比转换成相应的大小还是比较困难的。接下来说说我们这次的主角rem(我们一般只适应宽度)

　　rem 原理解析

　　首先，rem是相对于根元素的fontSize的相对单位，也就是说1rem等于html的fontSize。接下来，我们可以通过改变html元素的fontSize来控制rem的大小。接下来，如何才能适应不同的屏幕？只要屏幕宽度更大，1rem代表的px值就更大，HTML的fontSize值也更大，也就是说HTML的fontSize与屏幕宽度成正比。

　　先说一些概念设备像素比，设备物理像素，设备独立像素(有时称为虚拟像素)。

　　设备像素比率=设备物理像素/设备独立像素

　　设备物理像素：设备上显示的最小单位。

　　与设备无关的像素：一个与设备无关的单位(css大小)，用于逻辑测量像素。

　　以iphone6/7/8为例。iphone6/7/8的物理像素是750，这是设备的实际大小，而px是设备的独立像素单位。iphone6/7/8的屏幕为2x，css尺寸为375。设备的像素比率在设备出厂时已经设置好。那么我们怎么实现适配？

　　这用的是最流行的rem。

　　rem的实现方案

　　首先，根据不同屏幕的物理像素，需要从html元素的fontSize设置不同的px大小。

　　1.媒体询问

　　html { font-size:16px；} @媒体屏幕和(min-width:240 px){ html { font-size:9px；} } @媒体屏幕和(min-width:320 px){ html { font-size:12px；} } @媒体屏幕和(min-width:375 px){ html { font-size:14.0625 px；}}用@media screen和(min-width:XXX)判断设备的大小，然后设置html的fontSize。

　　2.js设置html的字体大小(网易方案)

　　函数set rem(){ let html rem=document . document element . client width document . document element . style . font size=html rem/7.5 px } set rem()以上代码基于iphone6，结果是1rem=100px的实际像素。因为iphone6的设备像素比例是2，所以在浏览器的预览中1rem是50px，也就是说1rem和设备宽度的关系是7.5倍。当设备宽度发生变化时，1rem的实际大小也会发生变化，在屏幕中的比例不会发生变化。(市面上大部分方案都是这种)

　　3.使用大众和vh

　　Html{ font-size: 10vw}vw和vh是新的相对单位，将可视区域的宽度和高度分成100份，类似于百分比布局。这个方案不用写js，但是兼容性有点差。

　　下面附上大众和vh的兼容性表。

　　每个省的Rem是相对于根元素的fontSize，因此所有的努力都是为了将根元素的fontSize设置为与设备的宽度成比例。

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。