什么是移动端适配

1.什么是移动端适配
两个概念：

自适应：根据不同的设备屏幕大小来自动调整尺寸，大小。
响应式：会随着屏幕的实时变动而自动调整，是一种自适应。
2.理解视口viewport
2.1PC端的视口
在浏览器中，我们可以看到的区域就是视口（viewport）
fixed就是相对于视口来进行定位的。
在PC端的页面中，我们是不需要对视口进行区分，因为我们的布局视口和视觉视口是同一个
2.2移动端的视口
在移动端，不太一样，你布局的视口和你可见的视口是不太一样的。

这是因为移动端的网页窗口往往比较小，我们可能会希望一个大的网页在移动端可以完整的显示口
所以在默认情况下，移动端的布局视口是大于视觉视口的;
所以在移动端，我们可以将视口划分为三种情况:

布局视口 (layout viewport)
视觉视口 (visuallayout)
理想视口 (ideallayout)
这些概念的区分，事实上来自ppk，他也是对前端贡献比较大的一个人(特别是在移动端浏览器)

2.2.0 PC端的网页在移动端显示的问题
.box{
width: 100px;
height: 100px;
background-color: #c2d873;
}

移动端显示：

我们会发现同样的100X100px的盒子在移动端显示确很小，没有显示真正的100x100px，这是因为PC端的页面为了完全展示在移动端讲整个页面同比例缩小显示了。

这些问题就要讲一些视口概念了。

2.2.1 布局视口
默认情况下，PC端的网页在移动端会如何显示？

会按照宽度为980px来布局一个页面的盒子和内容。
为了显示可以完整的显示页面中，对整个页面进行缩小。

我们相对于980px布局的这个视口，称之为布局视口 (layoutviewport)

布局视口的默认宽度是980px

所以我们没有对项目移动端适配的话在手机打开是会将项目同比例缩小。

2.2.2 视觉视口 (visual viewport)

默认情况下，我们按照980px显示内容，那么右侧有一部分区域就会无法显示，所以手机端浏览器会默认对页面进行缩放以显示到用户的可见区域中

那么显示在可见区域的这个视口，就是视觉视口 (visual viewport)

在Chrome上按shift+鼠标左键可以进行缩放。

2.2.3理想视口 (ideallayout)
如果所有的网页都按照980px在移动端布局，那么最终页面都会被缩放显示

事实上这种方式是不利于我们进行移动的开发的，我们希望的是设置100px，那么显示的就是100px;

如何做到这一点呢? 通过设置理想视口 (ideal viewport)

理想视口就是布局视口 === 视觉视口

反着说就是布局视口 === 视觉视口 就是理想视口

可以通过meta标签设置布局视口

值 可能的附加值 描述
width 一个正整数，或者字符串device-width 定义 viewport 的宽度。
height 一个正整数，或者字符串 device-height 定义 viewport 的高度。未被任何浏览器使用
initial-scale 一个0.0和10.0之间的正数 定义设备宽度与 viewport 大小之间的缩放比例
maximum-scale 一个0.0和10.0之间的正数 定义缩放的最大值，必须大于等于minimum-scale.否则表现将不可预测。
minimum-scale 一个0.0和10.0之间的正数 定义缩放的最小值，必须小于等于 maximum-scale.否则表现将不可预测。
user-scalable yes 或者 no 默认为 yes，如果设置为 no，将无法缩放当前页面。浏览器可以忽略此规则
开发的时候一般都这样写：