Vue前端⾯试题总结响应式布局详解（⼀）
1、 响应式布局如何实现
我们如何理解响应式布局
响应式布局是为了在开发中⽹站适应不同分辨率 不同设备的下提供的⽅法
1.1 常见的响应式布局分别有
1.百分⽐布局
2.利⽤媒体查询（css3新增特性 @media）
< 响应式布局
4.vw vh 响应式布局
5.利⽤弹性盒⼦ Flex 布局
百分⽐布局
利⽤相对于⽗元素的设置 ⼦元素会随着⽗元素的设置⽽改变
是不是这样理解有点难
到底是对于那个⽗元素的设置会导致根元素的改变
⼦元素的height或width中使⽤百分⽐，是相对于⼦元素的直接⽗元素，
width相对于⽗元素的width，height相对于⽗元素的height；
⼦元素的padding如果设置百分⽐，不论是垂直⽅向或者是⽔平⽅向，都相对于直接⽗亲元素的width，⽽与⽗元素的height⽆关。跟padding⼀样，margin也是如此，⼦元素的margin如果设置成百分⽐，不论是垂直⽅向还是⽔平⽅向，都相对于直接⽗元素的width；
媒体查询
@media是css3提供的⼀种适应不同分辨率下改变样式的⽅法
使⽤@media媒体查询可以针对不同的媒体类型定义不同的样式，特别是响应式页⾯，可以针对不同屏幕的⼤⼩，编写多套样式，从⽽达到⾃适应的效果。举例来说：
@media screen and (max-width: 960px){
body{
background-color:#FF6699
}
}
@media screen and (max-width: 768px){
body{
background-color:#00FF66;
}
}
@media screen and (max-width: 550px){
body{
background-color:#6633FF;
}
}
@media screen and (max-width: 320px){
body{flex布局详细讲解
background-color:#FFFF00;
}
}
上述的代码通过媒体查询定义了⼏套样式，通过max-width设置样式⽣效时的最⼤分辨率，上述的代码分别对分辨率在0～320px，320px ～550px，550px～768px以及768px～960px的屏幕设置了不同的背景颜⾊。
通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，⽐如我们为不同分辨率的屏幕，设置不同的背景图⽚。⽐如给⼩屏幕⼿机设置@2x图，为⼤屏幕⼿机设置@3x图，通过媒体查询就能很⽅便的实现。
但是媒体查询的缺点也很明显，如果在浏览器⼤⼩改变时，需要改变的样式太多，那么多套样式代码会很繁琐。
rem响应式布局
⾸先来看，什么是rem单位。rem是⼀个灵活的、可扩展的单位，由浏览器转化像素并显⽰。与em单位不同，rem单位⽆论嵌套层级如何，都只相对于浏览器的根元素（HTML元素）的font-size
如何动态使⽤rem布局
rem单位都是相对于根元素html的font-size来决定⼤⼩的，根元素的font-size相当于提供了⼀个基准，当页⾯的size发⽣变化时，只需要改变font-size的值，那么以rem为固定单位的元素的⼤⼩也会发⽣响应的变化。
因此，如果通过rem来实现响应式的布局，只需要根据视图容器的⼤⼩，动态的改变font-size即可。
function refreshRem(){
var docEl = doc.documentElement;
var width = BoundingClientRect().width;
var rem = width /10;
docEl.style.fontSize = rem +'px';
< = = rem;
}
win.addEventListener('resize', refreshRem);
当然rem布局也有缺点
通过rem单位，可以实现响应式的布局，特别是引⼊相应的postcss相关插件，免去了设计稿中的px到rem的计算。rem单位在国外的⼀些⽹站也有使⽤，这⾥所说的rem来实现布局的缺点，或者说是⼩缺陷是：
在响应式布局中，必须通过js来动态控制根元素font-size的⼤⼩。
也就是说css样式和js代码有⼀定的耦合性。且必须将改变font-size的代码放在css样式之前
vw vh布局
什么是vw/vh ?
css3中引⼊了⼀个新的单位vw/vh，与视图窗⼝有关，vw表⽰相对于视图窗⼝的宽度，vh表⽰相对于视图窗⼝⾼度，除了vw和vh外，还有vmin和vmax两个相关的单位
单位含义
vw相对于视窗的宽度，视窗宽度是100vw
vh相对于视窗的宽度，相对于视窗的⾼度，视窗⾼度是100vh
vmin vw和vh中的较⼩值
vmax vw和vh中的较⼤值
弹性盒⼦ Flex 布局

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