响应式设计--viewport

即视窗、视口，用于显示网页部分的区域，在 PC 端视口即是浏览器窗口区域，在移动端，为了让页面展示更多的内容，视窗的宽度默认不为设备的宽度，在移动端视窗有三个概念：布局视窗、视觉视窗、理想视窗

layout viewport布局视窗：在浏览器窗口css的布局区域，布局视口的宽度限制css布局的宽。为了能在移动设备上正常显示那些为pc端浏览器设计的网站，移动设备上的浏览器都会把自己默认的 viewport 设为 980px 或其他值，一般都比移动端浏览器可视区域大很多，所以就会出现浏览器出现横向滚动条的情况
visual viewport视觉视窗：终端设备显示网页的区域
ideal viewport理想视窗：针对当前设备最理想的展示页面的视窗，不会出现横向滚动条，页面刚好全部展现在视窗内，理想视窗也就是终端屏幕的宽度。

使用viewport标签控制布局

<mate name='viewport' content='width=device-width;initial-scale=1.0;maximum-scale=1;user-scalable=no'>

属性介绍

属性名	取值	描述
Width	正整数或device-width	定义视口的宽度，单位为像素
Height	正整数或device-height	定义视口的高度，单位为像素，一般不用
Initial-scale	[0.0-10.0]	定义初始缩放值
Minimum-scale	[0.0-10.0]	定义缩小最小比例，它必须小于或等于maximum-scale
Maximum-scale	[0.0-10.0]	定义放大最大比例，它必须大于等于minimum-scale
User-scalable	Yes/no	定义是否允许手动缩放，默认值yes

使用css媒体查询 @media

基于 css 的媒体查询属性 @media 分别为不同屏幕尺寸的移动设备编写不同尺寸的 css 属性，示例如下所示。虽然此方法能在一定程度上解决移动设备适配的问题，但我们也可以看出其存在以下问题，所以其已几乎被历史潮流淘汰。

页面上所有的元素都得在不同的 @media 中定义一遍不同的尺寸，这个代价有点高；
如果再多一种屏幕尺寸，就得多写一个 @media 查询块；

@media only screen and (min-width: 375px) { 
    .logo { width : 62.5px; 
    }
} 
@media only screen and (min-width: 360px) { 
    .logo { width : 60px; 
    } 
}
@media only screen and (min-width: 320px) { 
    .logo { width : 53.3333px; 
    } 
}

使用 rem 单位

rem（font size of the root element）是指相对于根元素的字体大小的单位，如果我们设置 html 的 font-size 为 16px，则如果需要设置元素字体大小为 16px，则写为 1rem。但是其还是必须得借助 @media 属性来为不同大小的设备设置不同的 font-size，相对上一种方案，可以减少重复编写相同属性的代价，简单示例如下所示。
我们也能看到该方案存在以下问题：

不同的尺寸需要写多个 @media；
所有涉及到使用 rem 的地方，全部都需要调用方法 calc() ，这个也挺麻烦的；

vw/vh 布局

vw/vh 方案与 rem 方案类似，都是将页面分成一份一份的，只不过 vw/vh 是将页面分为 100 份，1vw = device-width/100

解决移动适配问题