共计 3017 个字符，预计需要花费 8 分钟才能阅读完成。
在开发挪动端界面时，挪动端适配始终是一个比拟头疼的事件，常见的挪动端适配有 viewport 适配，rem 适配，百分比适配等等，在这里咱们只介绍 viewport 适配和 rem 适配。看完这篇文章置信你应该会实战操作挪动端对于不同手机大小的适配问题了。
一：rem 适配
rem 是指绝对于根元素的字体大小 (font-size) 的单位，根标签的 font-size=1rem。其能够称作为绝对单位，也就是说咱们能够通过视口的大小动静更新根元素字体大小 (font-size) 的值，从而动静更新 rem 所绝对的值，应用使得挪动端网页可能适配各种型号的手机。话不多说先上代码。
js 代码(用于动静批改其根标签 font-size 的值)：
<script type="text/javascript">
//rem 适配
//rem 适配原理：扭转了一个元素在不同设施上占据的 css 像素的个数
/*rem 适配的优缺点
长处: 没有毁坏完满视口
毛病:px 值到 rem 的转换太简单 */
(function(){var styleNode = document.createElement("style");
/* 当不除以 16 时此时 1em 便占据视口宽度,
那么咱们给其页面中的元素设置宽高根本都会小于 1rem, 浏览器的计算并不会特地精准容易呈现偏差 */
// var w = document.documentElement.clientWidth;
/* 所以此时咱们除以 16, 使得 16rem 便占据了满屏, 对于页面中大多数元素的 rem 都会超过 1rem */
var w = document.documentElement.clientWidth/16;// 获取视口大小
/* 设置此时根元素的 fontsize，向 html 的 style 款式中增加 font-size 属性 */
styleNode.innerHTML = "html{font-size:"+w+"px!important}";
// 向 head 标签中增加 style 标签，其中蕴含 html{font-size:w;}
document.head.appendChild(styleNode);
})()
</script>html 与 css 代码:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#test{
width: 2rem;
height: 2rem;
background: pink;
text-align: center;
line-height: 2rem;
}
</style>
</head>
<body>
<div id="test">test</div>
</body> 咱们来看一下通过扭转手机的型号 (视口的大小) 对于页面的元素有什么变动。
从上述两张图咱们能够看出，当咱们扭转手机的型号后(扭转实现后记得要刷新哦)，视口的大小也产生了扭转，对于 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 代码:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width"/>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/* 将其宽度设置为设计图大小的一半(设计图大小为 640px), 将其高度设置为 100px */
#test{
width: 320px;
height: 100px;
background: pink;
text-align: center;
font-size: 32px;
line-height: 100px;
}
</style>
</head>
<body>
<div id="test">test</div>
</body>
能够看出此时元素的大小并没有产生扭转 (因为咱们扭转的是视口的大小并不是元素的大小) 但其仍会占据视口的一半(依据缩放比来去扭转元素在以后界面所占据的大小)。这就是 viewport 进行挪动端适配的应用。
viewport 适配的原理
viewport 适配计划中，每一个元素在不同设施上占据的 css 像素的个数是一样的。然而 css 像素和物理像素的比例是不一样的，等比的 */
viewport 适配的优缺点
- 在咱们设计图上所量取的大小即为咱们能够设置的像素大小，即所量即所设
- 毛病毁坏完满视口
# 三：结尾
以上为 rem 适配与 viewport 适配应用进行的总结，但还是举荐大家应用 less+rem 进行挪动端的适配，如果有帮忙的话就点个赞呗，欢送大家进行评论区斧正。
