视口就是浏览器显示页面内容的屏幕区域。视口分为布局视口、视觉视口和理想视口。
布局视口 layout viewport
布局视口是移动设备的浏览器默认设置的一个视口，用于解决早期的PC端页面在手机上显示的问题，一般这个视口默认的分辨率是980px，这种情况下元素显示得都比较小，需要手动缩放网页才能看清。
视觉视口 visual viewport
视觉视口指的是用户正在看到的网页的区域，可以通过缩放去操作视觉视口，但不会影响到布局视口，布局视口仍保持原来的宽度。
理想视口 ideal viewport
前两种视口的阅读体验都不太好，仍然需要手动缩放网页才能将页面内容看清，而理想视口则是最理想的视口尺寸，简单的说就是设备有多宽，布局的视口就有多宽，小米商城京东等网站的手机网页版都是理想视口，我们不需要缩放窗口就可以将页面内容看清。
mate视口标签
其中，name=“viewport”表示这是一个视口标签，content用于声明某些属性，常用属性有
属性
说明
Width＜/strong>
用于设置宽度，device-Width＜/strong>
initial-scale
初始化缩放比，大于0的数字
maximum-scale
最大缩放比，大于0的数字
minimum-scale
最小缩放比，大于0的数字
user-scalable
用户是否可以缩放，yes或no（1或0）
minimal-ui
在网页加载是隐藏顶部的地址栏和底部的导航栏
物理像素就是所谓的分辨率，比如分辨率是1920*1080的屏幕，那么屏幕横向是1080个物理像素，纵向就是1920个物理像素。但有时候代码中写的是1px，在手机屏幕上显示不一定就是一个物理像素，比如视网膜屏幕，可以将更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率。
从上图中可以看出，原本一个像素，在显示的时候却用了两个物理像素，这就是物理像素比（实际显示的物理像素 / 指定的像素大小，上图中物理像素比就是4/2=2）
比如一张50px * 50px的图片，在视网膜屏幕中打开，按照上图中的换算关系，就会变成原来的两倍，也就是100px * 100px，肯定会造成图片模糊。所以要想解决这个问题，可以先准备一张100px * 100px的图片，然后指定宽高为原来的一半，就变成了50px * 50px，在屏幕中显示的时候，又会扩大为之前的两倍，又恢复成了100px * 100px，这样图片就不会模糊了。
不光是普通的图片可以缩放，背景图片也可以缩放，使用background-size属性就可以将背景图片缩放了。
看一下cover和contain的区别
流式布局很简单，就是百分比布局，也称非固定像素布局，简单来说就是将盒子的宽度设置成百分比，这样盒子的宽度就会根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
flex用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局，当父盒子被指定为flex布局后，子元素的float、clear和vertical-align属性将失效。采用flex布局的元素被称为flex容器，它的所有子元素自动成为容器成员，称为flex项目。
flex 布局就是通过给父盒子添加flex属性，来控制子元素的位置和排列方式
flex 布局父项常见属性
（设置主轴的方向）
在 flex 布局中，分为主轴和侧轴两个方向，又被称作行和列，x轴和y轴。默认的主轴是x轴，默认的侧轴是y轴。
主轴和侧轴是会变化的，通过flex-direction属性即可设置哪个是主轴以及主轴方向，剩下的就是侧轴，子元素是跟着主轴的方向排列的。
属性值
说明
row
x轴为主轴，子元素从左向右排列，默认值
row-reverse
x轴为主轴，子元素从右向左排列
column
y轴为主轴，子元素从上到下排列
column-reverse
y轴为主轴，子元素从下到上排列
（设置主轴上的子元素排列方式）
在确定好主轴后，就可以使用justify-content属性去定义子元素在主轴上的对齐方式。
属性值
说明
flex-start
默认值，从头部开始（如果主轴是x轴，则从左到右）
felx-end
从尾部开始排列
center
在主轴居中对齐（如果主轴是x轴，则水平居中）
space-around
平分剩余空间
space-between
先两边贴边，再平分剩余空间
（设置子元素是否换行）
flex布局中，默认情况下所有的子元素都排在一条线上，如果一条线上塞不下，就会缩减子元素的宽度，强制塞进一条线中，如果想控制是否换行，可以通过属性来设置nowrap（默认值，不换行），wrap（换行）。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
HTML连载30-CSS