浅谈页面自适应

在实习过程中，我参与开发了一个大屏模块，这个模块主要利用了Vue和Echarts。大屏需要展示很多东西，一个大屏模块里面通常包含七、八个小模块。而且要在1366*768的小屏中完全展示，要与窗口的调节同步自适应。因此，在这个模块的开发过程中，难点在于自适应布局。

页面的自适应主要有两种，一种是同一个页面在手机端和pc端的自适应，另一个则是pc端改变浏览器窗口的自适应。

一、同一个页面在手机端和pc端的自适应

在没有任何设置的情况下，同一个页面，在pc端可以正常显示。但是在手机端就会出现滚动条，甚至排版错乱。这是因为，一般情况下，移动设备上的viewport会比手机浏览器的可视区域大。

1、三个viewport的理论

在搜集资料的过程中，学习到了三个viewport的理论。分别是layout viewport、visual viewport和ideal viewport。
layout viewport：手机浏览器默认的viewport，可以通过document.documentElement.clientWidth获取。
visual viewport：器可视区域的大小，可以通过window.innerWidth获取。

ideal viewport：移动设备理想的viewport，不需要用户缩放和横向滚动。

2、ideal viewport的设置

接下来要讲的就是ideal viewport的设置。通过设置viewport，用户可以通过平移、缩小和方法浏览网页。

<meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0”>

width：控制viewport的大小，可以指定一个特殊的值，例如400；也可以为device-width为设备的宽度（单位为缩放为100%时的CSS像素）。
height：和width相对应，指定高度；可以不设置，即为充满设备高度。
initial-scale：初始缩放比例，也即是当页面第一个load的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：yes | no，用户是否可以手动缩放。

其中meta标签位于文档的头部，它的属性定义了与文档相关联的名称/值对。meta标签的必需属性是content，还有http-equiv、name、schemede可选属性。其中name属性提供了名称/值对中的名称，如果没有提供name属性，那么名称/值对中的名称会采用http-equiv属性的值。content、属性提供了名称/值对中的值，该值可以是任何有效的字符串。

二、Pc端改变浏览器窗口的自适应

想要实现改变浏览器窗口，页面自适应，可以使用以下两种方法。

1、页面布局要合理，模块的宽高使用百分比，减少px的使用，必要时使用min-width和min-height规定最小宽度和高度。

大屏模块需要在浏览器改变窗口大小的时候，进行媒体查询，设置不同情况下的宽高，实现自适应。我使用的就是左右布局+百分比。在大屏模块的根元素中设定

.root {
        position: absolute;
        width: 100%;
        height: 100%;
}

其子元素的宽高就可以使用百分比，这样就能根据窗口的大小合理分配空间。在窗口缩小到一定值时，可以设置最小宽高，overflow设置为scroll，某些小模块可以设置最小宽度，使其在小屏中也能在同一行显示。

2、利用rem来设置模块元素的宽高。

首先我们需要理解px，em，rem之间的区别。简单总结：
px：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em：相对长度单位。它相对于父元素的字体大小。
rem：相对长度单位。它相对于根元素的字体大小。

我们可以通过媒体查询容器的宽高，动态设置根元素的字体大小，其他元素利用rem，从而实现自适应。

.html {
        font-size: 16px;
        font-size: 62.5%;
}
.div {
        width: 1rem; /*即为10px*/
}

还有一个是利用bootstrap库来实现自适应，bootstrap库的功能很强大，能够很好的适配手机端和pc端，也能够根据窗口的改变实现自适应。

参考：
响应式 Web 设计 - Viewport
<meta>标签
移动前端开发之viewport的深入理解

彻底弄懂css中单位px和em,rem的区别

前往-->博主个人博客