前端的响应式布局

一、什么是视口
视口（viewport）就是浏览器显示在页面上的内容的屏幕区域。可以分为布局视口、视觉视口和理想视口。
其中布局视口只为所有的移动设备设置了一个固定的布局视口，视觉视口可以进行缩放，但是最推荐的是由乔布斯提出来的理想视口。是对不同的设备来讲，是最理想的视口尺寸，即设备有多宽，理想的视口就是多宽。
标准的meta视口标签写法

<!--即把视口的宽度设置为设备的宽度  width=device-width 视口就是为了移动端而生的-->
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0">

三、flex布局
flex布局是弹性布局，任何一个容器都可以设置为flex布局，一般是为父元素设置flex布局，来控制其子盒子进行flex布局。
flex布局可以不用进行浮动和清除浮动等操作。不存在行内和块级元素的区别，在flex布局中，行内和块级元素都是一样的。



flex布局父项常见属性：

1、flex-direction：设置主轴的方向


2、justify-content来设置主轴上子元素的排列方式
该属性定义了项目在主轴上的对齐方式，使用这个属性之前，一定要确认主轴的方向，确定主轴是哪一个。

其中：
center是指让项目进行居中（基于主轴）对齐。
space-around是指让项目平均分配父盒子的空间。
space-between是指让两边贴边，再平分剩余空间。
3、flex-wrap设置子元素是否换行
默认情况下，项目都排在轴线上。flex-wrap属性定义，flex布局中默认是不换行的。

4、align-items设置侧轴上的子元素排列方式（单行）

5、align-content设置侧轴上的子元素的排列方式（多行）


6、flex-flow属性
是flex-direction和flex-wrap属性的复合属性。
flex布局子项常见属性
四、rem适配布局

首先rem是一个单位。

那么什么又是em呢？em是相对于父元素的字体大小来说的。
而rem相对的是根元素。即rem中的r指的是root（根源）即root em，相对于HTML根元素的字体大小来说的。通常做法是给HTML元素设置一个字体大小，然后其他元素的长度单位就是rem。
使用rem适配布局的优势：可以通过修改HTML里面的文字大小来改变页面中元素的大小，可以整体控制。
媒体查询语法：
媒体查询（MediaQuery）是CSS3 的新语法。

媒体查询可以根据不同的屏幕尺寸来改变不同的样式。
screen还有and必须带上不能省略。多个条件用and进行连接。