概念: 响应式网站设计(Responsive Web Design) ，是一种网络页面布局设计，页面的设计与开发与用户行为以及设备环境(系统，终端，分辨率，屏幕定向)进行相应的响应与调整。类似一句名言：“content is like water”
响应式设计的特点:
- 同时适配PC + 平板 + 手机等
- 标签导航在接近手持终端设备时改变为经典的抽屉式导航
- 网站的布局会根据视口来调整模块的大小和位置
如何实现
mate
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>对应属性的功能:
- width=device-width: 是自适应手机屏幕的尺寸宽度
- maximum-scale:是缩放比例的最大值
- inital-scale:是缩放的初始化
- user-scalable:是用户的可以缩放的操作
那么除了媒体查询是否还有其他方式可以实现响应式设计呢？
当然有，如:
- 媒体查询
- 百分比(%)
- vh/vw
- rem/em
如何使用？
媒体查询
就类似于if一样，当屏幕宽度....设置相应的样式，当屏幕高度.... 设置相应的样式
@media screen (min-width: 375px) and (max-width: 600px) {
body {
font-size: 18px;
}
}这句话就表示，当屏幕宽度在 375px~600px之间时 body中的字体大小就为 18px
百分比
这里其实就与css中的单位扯上关系了，有人就会很奇怪，百分比是如何实现响应式布局呢？
你可以这样想，将整个屏幕的宽度视作100%宽度，高度为100%高度，那么其内容中的盒子们，就会可以相对于这个值去设置相应的百分比宽度、高度，而这些盒子内部的元素又可以相对于盒子的百分比宽高去设置相应的百分比大小了，这样当我们屏幕的尺寸发生变化的时候，内容就会自动适应。
vw/vh
其实vw/vh与上面讲到的百分比是差不多的，主要区别就在于 vw/vh 永远是相对于视口的，而百分比是相对于父级元素的
rem
这个的话主要用于定义字体的响应式，但是也可以用于大件的元素，原理就是，事先定义好一组rem的大小，之后就可以相对于定义好的一个rem去适配了，详细可以去查看有关单位相关的文案
综上而言， 其实对于响应式布局，刨开来看，就是提前写好两份样式，在进行监测终端的尺寸，进行不同的展示方案，不难发现，这种方式其实实现起来是比较麻烦的，对于工作量本身就大的网页来说，同时在一个项目中去书写两份样式，对某些元素的展示与影藏，是非常损耗性能的，工作量和重新构建一个终端的页面来说，工作量与可维护性，都差不多，相反后者可持续发展性还更优秀点。
