⾯试官：什么是响应式设计？响应式设计的基本原理是什么？
如何做？
⼀、是什么
响应式⽹站设计（Responsive Web design）是⼀种⽹络页⾯设计布局，页⾯的设计与开发应当根据⽤户⾏为以及设备环境(系统平台、屏幕尺⼨、屏幕定向等)进⾏相应的响应和调整
描述响应式界⾯最著名的⼀句话就是“Content is like water”
⼤⽩话便是“如果将屏幕看作容器，那么内容就像⽔⼀样”
响应式⽹站常见特点：
同时适配PC + 平板 + ⼿机等
标签导航在接近⼿持终端设备时改变为经典的抽屉式导航
⽹站的布局会根据视⼝来调整模块的⼤⼩和位置
⼆、实现⽅式
响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺⼨做处理，为了处理移动端，页⾯头部必须有meta声明viewport
<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：是⽤户的可以缩放的操作
实现响应式布局的⽅式有如下：
媒体查询
百分⽐
vw/vh
rem
媒体查询
CSS3中的增加了更多的媒体查询，就像if条件表达式⼀样，我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调⽤相对应的样式表
使⽤@Media查询，可以针对不同的媒体类型定义不同的样式，如：
@media screen and (max-width: 1920px) { ... }
当视⼝在375px - 600px之间，设置特定字体⼤⼩18px
@media screen (min-width: 375px) and (max-width: 600px) {
body {
font-size: 18px;
}
}
通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，⽐如我们为不同分辨率的屏幕，设置不同的背景图⽚
⽐如给⼩屏幕⼿机设置@2x图，为⼤屏幕⼿机设置@3x图，通过媒体查询就能很⽅便的实现
百分⽐
通过百分⽐单位 " % " 来实现响应式的效果
⽐如当浏览器的宽度或者⾼度发⽣变化时，通过百分⽐单位，可以使得浏览器中的组件的宽和⾼随着浏览器的变化⽽变化，从⽽实现响应式的效果
height、width属性的百分⽐依托于⽗标签的宽⾼，但是其他盒⼦属性则不完全依赖⽗元素：
⼦元素的top/left和bottom/right如果设置百分⽐，则相对于直接⾮static定位(默认定位)的⽗元素的⾼度/宽度
⼦元素的padding如果设置百分⽐，不论是垂直⽅向或者是⽔平⽅向，都相对于直接⽗亲元素的width，⽽与⽗元素的height⽆关。
⼦元素的margin如果设置成百分⽐，不论是垂直⽅向还是⽔平⽅向，都相对于直接⽗元素的width
border-radius不⼀样，如果设置border-radius为百分⽐，则是相对于⾃⾝的宽度
可以看到每个属性都使⽤百分⽐，会照成布局的复杂度，所以不建议使⽤百分⽐来实现响应式
vw/vh
vw表⽰相对于视图窗⼝的宽度，vh表⽰相对于视图窗⼝⾼度。任意层级元素，在使⽤vw单位的情况下，1vw都等于视图宽度的百分之⼀
与百分⽐布局很相似，在以前⽂章提过与%的区别，这⾥就不再展开述说
rem
在以前也讲到，rem是相对于根元素html的font-size属性，默认情况下浏览器字体⼤⼩为16px，此时1rem = 16px
可以利⽤前⾯提到的媒体查询，针对不同设备分辨率改变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
}
}
为了更准确监听设备可视窗⼝变化，我们可以在css之前插⼊script标签，内容如下：
//动态为根元素设置字体⼤⼩
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的1/10，实现了百分⽐布局
除此之外，我们还可以利⽤主流UI框架，如：element ui、antd提供的栅格布局实现响应式
⼩结
响应式设计实现通常会从以下⼏⽅⾯思考：
弹性盒⼦（包括图⽚、表格、视频）和媒体查询等技术
使⽤百分⽐布局创建流式布局的弹性UI，同时使⽤媒体查询限制元素的尺⼨和内容变更范围使⽤相对单位使得内容⾃适应调节
选择断点，针对不同断点实现不同布局和内容展⽰
页面设计是什么
三、总结
响应式布局优点可以看到：
⾯对不同分辨率设备灵活性强
能够快捷解决多设备显⽰适应问题
缺点：
仅适⽤布局、信息、框架并不复杂的部门类型⽹站
兼容各种设备⼯作量⼤，效率低下
代码累赘，会出现隐藏⽆⽤的元素，加载时间加长
其实这是⼀种折中性质的设计解决⽅案，多⽅⾯因素影响⽽达不到最佳效果
⼀定程度上改变了⽹站原有的布局结构，会出现⽤户混淆的情况
参考⽂献
--The End--
系列正在更新：14/20
点击下⽅卡⽚解锁更多
创作不易，星标、点赞、在看 三连⽀持

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。