什么是响应式设计？基本原理？如何实现？优缺点？
什么是响应式设计
响应式网站设计是一个网站能够兼容多个终端，智能地根据不同设备环境进行相对应的布局
(同时适配PC+平板+手机)
基本原理
基本原理是通过媒体查询检测不同的设备屏幕尺寸设置不同的css样式，为了处理移动端，页面头部必须有meta声明的viewport
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>
/*
width=device-width: 是自适应手机屏幕的尺寸宽度
inital-scale:是缩放的初始化,
maximum-scale:是缩放比例的最大值
user-scalable:是用户的可以缩放的操作
*/
实现方式
- 百分比布局，但是无法对字体，边框等比例缩放(不建议使用)
- 弹性盒子布局 display:flex
- rem布局，1rem=html的font-size值的大小
- css3媒体查询 @media screen and(max-width: 750px){}
- vw+vh
- 使用一些主流框架（bootstrap，vant，element ui antd提供的栅格布局实现响应式）
| 实现方式 | 优缺点 |
|---|---|
| 百分比 | height 、 width 属性的百分比依托于父标签的宽高，但是其他盒子属性则不完全依赖父元素:子元素的top/left和bottom/right如果设置百分比，则相对于直接非static定位(默认定位)的父元素的高度/宽度；子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关；子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width；border-radius不一样，如果设置border-radius为百分比，则是相对于自身的宽度；可以看到每个属性都使用百分比，会造成布局的复杂度，所以不建议使用百分比来实现响应式 |
| 弹性盒子 | |
| vm/vh | vw 表示相对于视图窗口的宽度， vh 表示相对于视图窗口高度。 任意层级元素，在使用 vw 单位的情况下， 1vw 都等于视图宽度的百分之一与百分比布局很相似 |
| rem | 相对跟元素html的font-size属性，默认情况下浏览器字体大小16px,此时1rem=16px 代码如下 |
| 媒体查询 | 代码如下 |
// 媒体查询 当视口在 375px和600px之间，字体大小为18px
@media screen (min-width: 375px) and (max-width: 600px) {
body {
font-size: 18px;
}
}
// 根据不同设备分辨率 改变font-size值
@media screen and (max-width: 414px) {
html {
font-size: 18px
}
}
@media screen and (max-width: 375px) {
html {
font-size: 16px
}
}
@media screen and (max-width: 320px) {
html {
font-size: 12px
}
}
//动态为跟元素设置字体大小
function init () {
//获取屏幕宽度
var width = document.documentElement.clientWidth
//设置跟元素字体大小，此时为宽的10等份
document.documentElement.style.fontSize = width / 10 + 'px'
}
//首次加载应用，设置一次
init()
//监听手机旋转事件，重新设置
window.addEventListener('orientationchange', init)
//监听手机窗口变化，重新设置
window.addEventListener('resize', init)
// 无论视口如何变化，rem为width的10分之1，实现了响应式
优缺点
优点:
- 面对不同分辨率设备
灵活性强 - 能够快捷解决多设备
显示适应问题
缺点:
- 仅适用布局、信息、框架并不复杂的部门类型网站
- 兼容各种设备
工作量大，效率低下 代码累赘，会出现隐藏无用的元素，加载时间加长- 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
- 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
