HTML5中 rem适配方案与 viewport 适配问题详解

HTML5中rem适配方案与viewport适配问题详解

什么是rem？

rem是CSS3新增的一个相对单位，相对于根元素html的字体大小来计算。

rem适配方案是什么？

rem适配方案是指通过JavaScript获取当前屏幕宽度，并动态设置html的font-size值，然后使用rem作为单位设置元素的大小，实现自适应的布局。

如何实现rem适配方案？

方法一：手动计算

手动计算rem值的公式为：元素的宽度/设计稿的宽度*100，例如：

#box {
    width: 375px; /* 元素宽度 */
    height: 200px; /* 元素高度 */
    font-size: 14px; /* 元素字体大小 */
    margin: 20px auto;
}

html {
    font-size: 100px; /* 设计稿宽度为375px时，根元素字体大小为100px */
}

方法二：使用第三方库

可以使用第三方库如flexible.js、rem.js等来自动计算放缩倍数和设置根元素的font-size值。

例如使用flexible.js实现rem适配方案：

1. 引入flexible.js

<script src="//cdn.bootcss.com/amfe-flexible/2.0.0/amfe-flexible.min.js"></script>

1. 设置meta标签的viewport

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

1. 使用rem单位设置元素的大小

#box {
    width: 3.75rem; /* 元素宽度 */
    height: 2rem; /* 元素高度 */
    font-size: 0.14rem; /* 元素字体大小 */
    margin: 0.2rem auto;
}

什么是viewport？

viewport是视口的意思，是移动端设备上可视区域的大小，包括浏览器的地址栏、工具栏等。在HTML5中，可以通过设置meta标签的viewport来控制页面的缩放等问题。

viewport适配问题是什么？

viewport适配问题是指为了适应不同屏幕宽度的设备，需要根据设计稿的实际大小，动态设置meta标签的viewport参数，实现自适应缩放的页面。

如何实现viewport适配问题？

方法一：手动计算

手动计算viewport参数的规则为：viewport的宽度略小于设备的物理宽度，并设置initial-scale=1，例如：

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

方法二：使用第三方库

同rem适配方案一样，也可以使用第三方库如flexible.js、rem.js等来实现viewport适配问题。

例如使用flexible.js实现viewport适配问题：

1. 引入flexible.js

<script src="//cdn.bootcss.com/amfe-flexible/2.0.0/amfe-flexible.min.js"></script>

1. 设置meta标签的viewport

<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">

通过以上方法，可以实现移动端页面的自适应布局和缩放。