视口就是浏览器显示页面内容的屏幕区域。视口分为布局视口、视觉视口和理想视口。

 

　　布局视口 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（换行）。