**** 在学习了视口之后，综合查询网上资料，对视口进行一个小的自我总结，帮助自己更深刻的理解。**
老师在课上只通俗的提到了视口，在我看来他是作为一个连接pc端和移动端的桥梁。pc端逻辑像素与物理像素也就是物理分辨率是1：1的，但是受限于移动端手机的宽度，会导致pc端网页的大小在移动端失衡，因此可以利用视口解决这个问题。
视口可以理解为一个盒子，当用移动端访问pc端网页时，pc端的网页会先被放入视口这个盒子中（为了使视口可以访问老旧网站，所以一般视口宽度都被定为980px。），然后比较视口和手机宽度的大小，如果视口宽度小于等于手机宽度，那么久无需压缩，直接放入。如果视口宽度大于手机宽度，那么这时候就需要压缩处理过后，再放入手机中，显示的效果也会相比于pc端显得浓缩一些。
通过查询资料我发现视口可以分为三种：布局视口，视觉视口，理想视口。
<1> 布局视口：
布局视口就是在编写代码时自定义视口的大小来确保自己的内容不被压缩，例如200 * 200的内容放在414px大小的视口内，肯定是可以放下的，此时在iphone6/7/8 plus系列的手机中，pc端打开这个内容和移动端打开这个内容效果将是一样的。
布局视口可以理解为一个画板，它规定你只能在这个大小的范围内进行操作。布局视口对用户来说意义并不大，但是对于开发者意义重大，它规定了开发者开发的宽度。
布局视口的代码如下：
<meta name="viewport" content="width=400">
<2> 视觉视口： 按照别人的解释，视觉视口是用户当前看到的区域，用户可以通过缩放操作视觉视口，同时不影响布局视口。当用户放大时，视觉视口将会变小，CSS像素会跨越更多物理像素。 视觉视口的缩放比例关系为：
当前缩放值 = 理想视口宽度 / 视觉视口宽度
当你实际开发的内容大于你手机的宽度时，浏览器会按照上面的比例对内容进行缩放以求画面显示完全，完全后也就没有滚动条之类的，这只是初始状态的处理，但是你也可以进行放大操作，这时就会出现滚动条。
定义缩放值的代码：
"initial-scale=1.0"
<3> 理想视口 理想视口规定： 布局视口宽度 = 视觉视口宽度 = 设备宽度
这样可以使pc端的网页在移动端运行时，不会被压缩，因为他的盒子的宽度始终等于手机的宽度，可以完美的展示出来。
使用下列代码可以实现布局视口和理想视口宽度的一致：
<meta name="viewport" content="width=device-width">
