1、什么是响应式
响应式网站设计（Responsive Web design）是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。
2、单位
传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性。
从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单位。
利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等。
在css单位中，可以分为长度单位、绝对单位，如下表所示：
1）px
px，表示像素，所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大小等同的。
像素分为两种类型：css像素和物理像素。
我们在js或者css代码中使用的px单位就是指的是css像素；物理像素也称设备像素，只与设备或者说硬件有关，同样尺寸的屏幕，设备的密度越高，物理像素也就越多。
2）em
em是相对长度单位。相对于当前对象内文本的字体尺寸， 根据父元素的大小变化而变化。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）。
为了简化 font-size 的换算，我们需要在css中的 body 选择器中声明 font-size= 62.5%，这就使 em 值变为 16px*62.5% = 10px。这样 12px = 1.2em, 10px = 1em, 也就是说只需要将你的原来的px数值除以 10，然后换上 em作为单位就行了。
特点：
a、em 的值并不是固定的；
b、em 会继承父级元素的字体大小；
c、em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸；
d、任意浏览器的默认字体高都是 16px；
3）rem
rem，相对单位，相对的只是HTML根元素font-size的值。
同理，如果想要简化font-size的转化，我们可以在根元素html中加入font-size: 62.5%。这样页面中1rem=10px、1.2rem=12px、1.4rem=14px、1.6rem=16px;使得视觉、使用、书写都得到了极大的帮助；
特点：
a、rem单位可谓集相对大小和绝对大小的优点于一身；
b、和em不同的是rem总是相对于根元素，而不像em一样使用级联的方式来计算尺寸。
4）vh、vw
vw ，就是根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理，vh则为窗口的高度。
这里的窗口分成几种情况：在桌面端，指的是浏览器的可视区域；移动端指的就是布局视口。
像vw、vh，比较容易混淆的一个单位是%，不过百分比宽泛的讲是相对于父元素：
a、对于普通定位元素就是我们理解的父元素；
b、对于position: absolute;的元素是相对于已定位的父元素；
c、对于position: fixed;的元素是相对于 ViewPort（可视窗口）。
3、实现响应式布局的方式
响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport。
页面设置
属性对应如下：
a、width=device-width: 是自适应手机屏幕的尺寸宽度。
b、maximum-scale: 是缩放比例的最大值。
c、inital-scale: 是缩放的初始化。
d、user-scalable: 是用户的可以缩放的操作。
1）媒体查询
CSS3中的增加了更多的媒体查询，就像if条件表达式一样，我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表。
使用@Media查询，可以针对不同的媒体类型定义不同的样式，
当视口在375px - 600px之间，设置特定字体大小18px。
通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，比如我们为不同分辨率的屏幕，设置不同的背景图片。比如给小屏幕手机设置@2x图，为大屏幕手机设置@3x图，通过媒体查询就能很方便的实现。
2）百分比
通过百分比单位 " % " 来实现响应式的效果。比如当浏览器的宽度或者高度发生变化时，通过百分比单位，可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。
height、width属性的百分比依托于父标签的宽高，但是其他盒子属性则不完全依赖父元素：
a、子元素的top/left和bottom/right如果设置百分比，则相对于直接非static定位(默认定位)的父元素的高度/宽度；
b、子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关；
c、子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width；
d、border-radius不一样，如果设置border-radius为百分比，则是相对于自身的宽度。
可以看到每个属性都使用百分比，会照成布局的复杂度，所以不建议使用百分比来实现响应式。
3）vw/vh
vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一，与百分比布局很相似。
4）rem
rem是一个灵活的、可扩展的单位，由浏览器转化像素并显示。rem是相对于根元素html的font-size属性，默认情况下浏览器字体大小为16px，此时1rem = 16px。可以利用前面提到的媒体查询，针对不同设备分辨率改变font-size的值。
为了更准确监听设备可视窗口变化，我们可以在css之前插入script标签。
无论设备可视窗口如何变化，始终设置rem为width的1/10，实现了百分比布局。
除此之外，我们还可以利用主流UI框架，如：element ui、antd提供的栅格布局实现响应式。
网友评论