meta viewport 移动端适配,移动端怎么配置rem
在开发移动界面时，移动适配一直是一个令人头疼的问题。常见的移动适应包括视口适应、rem适应、百分比适应等。这里我们只介绍视口适应和rem适应。看完这篇文章，相信你应该能实际操作移动终端对不同手机尺寸的适配。
一：rem适配
Rem是相对于根元素的字体大小单位，根标签的字体大小为1 rem。可以称之为相对单元，也就是说我们可以通过视口的大小动态更新根元素的font-size值，从而动态更新rem的相对值，使手机网页适应各种类型的手机。话不多说，先码。
Js代码(用于动态修改其根标签字体大小的值):
script type= text/JavaScript //rem适配//REM适配原理：改变一个元素在不同设备上占用的css像素数量/* REM适配的优缺点：不破坏完美的视口。缺点：px值到REM的转换太复杂*/(function(){ var style node=document . createelement( style )；/*不除以16时，1em此时会占据视口宽度，所以我们在它的页面上设置的元素的宽度和高度基本都会小于1em，浏览器的计算不会特别准确。*//var w=document . documentelement . client width；/*所以此时我们除以16，这样16rem就会占据整个屏幕，页面中大多数元素的rem都会超过1 rem */var w=document.documentElement.clientWidth/16;//获取viewport size/*设置此时根元素的fontsize，并在html */style node . innerhtml= html { font-size: w px！重要}”；//在head标签中添加style标签，包含html { font-size:w；} document . head . appendchild(style node)；})() /scripthtml和css代码：
head meta charset= UTF-8 meta name= viewport content= width=设备宽度，initial-scale=1.0，minimum-scale=1.0，maximum-scale=1.0，user-scalable=no /title/title style type= text/CSS * { margin:0；填充：0；} #测试{ width:2 rem；身高：2雷姆；背景：粉色；文本对齐：居中；行高：2雷姆；}/style/head body div id= test test/div/body我们来看看通过改变手机的型号(视口的大小)对页面的元素做了哪些改变。
从上面两张图可以看出，当我们改变手机的型号时(改变后记得刷新)，viewport的大小也发生了变化，test元素的宽度和高度也发生了变化。这时候我们就可以适配移动端了。
快速眼动适应原理
更改了不同设备上的元素所占用的css像素数量。
快速眼动适应的利与弊
优点：对完美视口无损伤缺点：px值转换rem太复杂(下面我们少用点解决这个问题)less+rem解决转换复杂问题
使用更少的用于计算减少了手动计算所需的rem值。你也可以使用css预处理程序，如手写笔和SCSS来计算rem。这个例子需要配合上面的js代码。
在这一点上，我们较少的代码是：
/*此时我们的750是设计尺寸，具体数值要根据设计尺寸来设定。*/*对于750/16rem，逻辑是：因为16rem是页面的总宽度，所以750(设计的宽度)/16rem给出1rem与设计的等比例。*/*如果这样合适，我们可以根据设计中元素的宽度来设计尺寸，比如test的宽度和高度。# test { width:200/@ rem；身高：200/@雷姆；背景：粉色；文本对齐：居中；行高：200/@雷姆；}注意！需要结合以上js代码一起使用！
二：viewport适配
对于视口适配，实际上就是改变视口的大小，也就是说，可以看作是近大小远大小的原则。当视窗宽度减小时，当前元素的可见尺寸也将减小，当视窗宽度增加时，当前元素的可见尺寸将增加。以便适应移动终端。话不多说，继续码：
Js代码：
(function(){ /* targetW的值为设计图纸的宽度，此时设置的宽度为640 */var targetW=640；/*获取视口缩放比例*/var scale=document.documentElement.clientWidth/targetW;/*获取meta标记*/var meta=document . query selector( meta[name= viewport ])；/*向其添加缩放比例*/meta . content= initial-scale= scale ，minimum-scale= scale ，maximum-scale= scale ，user-scalable=no ；})()html和css代码：
head meta charset= UTF-8 meta name= viewport content= width=设备宽度/title/title style type= text/CSS * { margin:0；填充：0；}/*将其宽度设置为设计尺寸的一半(设计尺寸为640px)，高度设置为100px */# test { width:320 px；高度：100px背景：粉色；文本对齐：居中；字体大小：32px行高：100px}/style/head body div id= test test/div/body
可以看到，此时元素的大小并没有改变(因为我们改变的是视口的大小，而不是元素的大小)，但它仍然会占据半个视口(根据缩放比例改变当前界面中元素的大小)。这是使用视口进行移动改编。
viewport适配的原理
在视口适配方案中，不同设备上的每个元素所占用的css像素数量是相同的。但是css像素和物理像素的比例不一样，等比例*/
viewport适配的优缺点我们设计图上的实测尺寸是我们可以设置的像素尺寸，即实测尺寸是破坏完美视口的设置缺陷# 三：结尾。
以上是rem适配和视口适配的总结，但还是建议你少用rem进行移动适配。有关rem或视口移动适应的更多信息，请搜索以前的文章或继续浏览以下相关文章。希望你以后能支持我！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。