如何使用rem或viewport进行移动端适配

这篇文章主要介绍"如何使用rem或viewport进行移动端适配"的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇"如何使用rem或viewport进行移动端适配"文章能帮助大家解决问题。

一：rem适配

rem是指相对于根元素的字体大小(font-size)的单位，根标签的font-size=1rem。其可以称作为相对单位，也就是说我们可以通过视口的大小动态更新根元素字体大小(font-size)的值，从而动态更新rem所相对的值，使用使得移动端网页能够适配各种型号的手机。话不多说先上代码。

js代码(用于动态修改其根标签font-size的值)：

html与css代码:

                                                   
test
    

我们来看一下通过改变手机的型号(视口的大小)对于页面的元素有什么变化。

当我们改变手机的型号后(改变完成后记得要刷新哦)，视口的大小也发生了改变，对于test元素的宽高也发生了改变，此时我们就能够进行进行移动端适配了。

rem适配原理

改变了一个元素在不同设备上占据的css像素的个数

rem适配的优缺点

• 优点：没有破坏完美视口

• 缺点：px值转换rem太过于复杂(下面我们使用less来解决这个问题)

less+rem解决转换复杂问题

使用less中进行运算，减少了我们手动进行计算所需要的rem值，也可以使用stylus,scss等css预处理器，来进行对于rem的运算,该例子需要结合上述js代码来进行搭配。

此时我们的less代码为:

/* 此时我们的750为设计图大小,具体值应该跟随设计图大小来进行设置 *//* 对于750/16rem的逻辑为:因为16rem为占据页面的总宽,所以750(设计图的宽度)/16rem得出1rem与设计图的等比 *//* 这个适合我们就可以根据该元素在设计图的宽度来设计大小啦,例如test的宽高为200px,那么我们就可以这样来写： */    @rem:750/16rem;    #test{              width: 200/@rem;              height: 200/@rem;              background: pink;              text-align: center;              line-height: 200/@rem;          }

注意！需要结合上述的js代码来一起使用哦！

二：viewport适配

对于viewport适配，实际是更改视口的大小，也就是说可以将其当作近大远小的原理，当减小视口宽度之后当前元素的可视大小也会减小，当增加视口宽度之后当前的元素可视大小会增大。从而进行移动端的适配。话不多说继续上代码：

js代码:

(function(){             /* targetW的值为设计图的宽度大小,此时设置的宽度大小为640 */            var targetW = 640;            /* 获取视口缩放的比例 */            var scale = document.documentElement.clientWidth/targetW;            /* 获取到meta标签 */            var meta =    document.querySelector("meta[name='viewport']");            /* 向其添加缩放的比例 */            meta.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";    })()

html与css代码:

                                          
test
    

可以看出此时元素的大小并没有发生改变(因为我们改变的是视口的大小并不是元素的大小)但其仍会占据视口的一半(根据缩放比来去改变元素在当前界面所占据的大小)。这就是viewport进行移动端适配的使用。

viewport适配的原理

viewport适配方案中，每一个元素在不同设备上占据的css像素的个数是一样的。但是css像素和物理像素的比例是不一样的，等比的*/

• viewport适配的优缺点
  

• 在我们设计图上所量取的大小即为我们可以设置的像素大小，即所量即所设

• 缺点破坏完美视口

关于"如何使用rem或viewport进行移动端适配"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注行业资讯频道，小编每天都会为大家更新不同的知识点。