移动端Web页面布局

viewport

viewport就是浏览器上，用来显示网页的那一部分区域。和我们手机的宽度不一样的，无论你的手机宽度是320px，还是640px，在手机浏览器内部的宽度，始终会是浏览器本身的viewport的宽度。如今的浏览器，都会给自己的本身提供一个viewport的默认值，目前，新版本的手机浏览器，绝大部分是以980px作为默认的viewport值的。这样在我们的手机浏览器中，就会出现横向滚动条，我们知道在页面布局中除了极少一些网页是特殊的横向布局，其他正常情况下，出现横向滚动条是非常致命的行为。所以，一般的，我们会专门给浏览器设计一个移动端的页面。再通过对viewport的简单设置，使viewport与设备尺寸相等或有一个相互关系，从而使我们的页面有一个更好的体验。

我们可以通过页面的meta标签进行设置，设置语句如下：

参数解释：

• width = device-width：宽度等于当前设备的宽度
• initial-scale：初始的缩放比例（默认设置为1.0）
• minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
• maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
• user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

移动端页面常用单位

比较常用的单位有em，rem，%，vw和vh等，这些单位都有一个共同点，他们都是一个相对单位，是可以根据页面的viewport的变化，进行实时改变。

我们简单介绍一下：em的值，根据父元素的font-size进行计算；rem是根据跟元素的font-size进行计算；% 根据父元素的尺寸进行计算；vw和vh分别根据viewport的宽度和高度进行计算，100vw或vh，等于viewport的宽度或高度。

rem是相对尺寸单位，rem是将根节点html的font-size的值作为整个页面的基准尺寸，计算如下：

元素的rem尺寸 = 元素的psd稿测量的像素尺寸 / 动态设置的html标签的font-size值

设计稿的宽度像素/html的font-size = 1rem的值。当然我们需要动态的对html的font-size进行改变。

@media screen and (min-width: 320px) {html{font-size:17.06666px;}}
@media screen and (min-width: 360px) {html{font-size:19.2px;}}
@media screen and (min-width: 375px) {html{font-size:20px;}}
@media screen and (min-width: 400px) {html{font-size:21.33333px;}}
@media screen and (min-width: 414px) {html{font-size:22.08px;}}
@media screen and (min-width: 440px) {html{font-size:23.46666px;}}
@media screen and (min-width: 480px) {html{font-size:25.6px;}}
@media screen and (min-width: 520px) {html{font-size:27.73333px;}}
@media screen and (min-width: 560px) {html{font-size:29.86666px;}}
@media screen and (min-width: 600px) {html{font-size:32px;}}
@media screen and (min-width: 640px) {html{font-size:34.13333px;}}
@media screen and (min-width: 680px) {html{font-size:36.26666px;}}
@media screen and (min-width: 720px) {html{font-size:38.4px;}}
@media screen and (min-width: 750px) {html{font-size:40px;}}
@media screen and (min-width: 760px) {html{font-size:40px;}}
@media screen and (min-width: 800px) {html{font-size:40px;}}
@media screen and (min-width: 960px) {html{font-size:40px;}}

大厂的做法

/*  京东 m.jd.com */
@media only screen and (min-width: 320PX) and (max-width:360PX) {
    html {
        font-size:13.65px
    }
}
@media only screen and (min-width: 360PX) and (max-width:375PX) {
    html {
        font-size:15.36px
    }
}
@media only screen and (min-width: 375PX) and (max-width:390PX) {
    html {
        font-size:16px
    }
}
@media only screen and (min-width: 390PX) and (max-width:414PX) {
    html {
        font-size:16.64px
    }
}
@media only screen and (min-width: 414PX) and (max-width:640PX) {
    html {
        font-size:17.664px
    }
}
@media screen and (min-width: 640PX) {
    html {
        font-size:27.31px
    }
}
/* 
我们来看看怎么计算的
设计图中 尺寸40px盒子，我们可以看到在媒体查询中，iPhone6 的布局视口是375，即html的font-size为16px，
则计算为rem： 40/16 = 2.5 rem
*/