如何制作响应式风格-知识点回顾

1：如何进行页面布局？

弹性盒子： display:flex

可以实现 垂直，水平居中、垂直反序 flex-direction:column-reverse，水平反序 flex-direction:row;

两端留白：justify-content:space-around，子元素占据剩余空间：justify-content: space-between；

改变视觉列表项顺序：order:-1(所有最前面);   进行排列项： flex-flow: row wrap; 

flex:1; 这个是简写，其实这里有三个值，flex:0 1 auto；

第一项：是相对于其它伸缩项，当前伸缩项在空间允许的情况下可以伸展的量。

第二项：在空间不够的情况边，当前伸缩项相对于其它伸缩项可以收缩的量。

第三项：是伸缩项伸缩的基准值。

2：h5的新增两个点:

(1)pattern  新增正则表达式。

（2）required   必填项。

3：svg 是什么？

解：伸缩矢量图，可以进行代替png,jpg ，好处在于：不用在于屏幕的分辨率，它都不会失真，而且

大小比它们都小。

4：视口是什么？

解：视口指屏幕显示在屏幕的区域，视口并不等于屏幕的宽度，这个不同概念。

视口按照屏幕的宽度进行展示网页。

5：断点是什么？

解：即不同屏幕显示不同布局的分界点，这个让设计师来确定。

6：响应式图片，这个在使用同一种图片的时候：

解：width :100%  这个会进行伸缩。

max-width:100%    这个不会进行拉伸。

7：响应式图片有可能使用不同的断点的时候，使用不同的图片，给出多种选择。

（1）picture  元素，不一定会支持  结合source（多种图片选项） 和 img（不支持的时候，默认的图片选项） 进行使用。

（2）srcset 和  sizes 结合使用进行切换分辨率，来提供不同图片地址路径。

8： 100vw  指的是什么，1.5x 指的是什么？

解：（1）100vw 视口宽度的100%。

（2）1.5x  指的分辨率1.5倍 适用于1.5 分辨率的屏幕，其实也是只分辨率比1x高。