- A+
在做web开发的工作中，会遇到需要我给页面根据设计的要求，进行响应式布局，这里跟大家分享下我对于响应式布局的解决方法：
我主要利用的是CSS3 媒体查询，即media queries，可以针对不同的媒体类型定义不同的样式，从而实现响应式布局 。也可以针对不同的分辨率设置不同的样式。
在实际操作中，我们使用到的代码有：
@media all 用于所有设备 print 用于打印机和打印预览。
screen 用于电脑屏幕，平板电脑，智能手机等。
speech 应用于屏幕阅读器等发声设备。
orientation:portrait : 竖屏
orientation:landscape : 横屏
注：横竖屏操作，只是针对移动端的。在PC端屏幕永远是竖屏的
例如：
@media all and (min-width:500px){
#box{ background:blue;}
}
这段代码的含义当分辨率>=500px的时候，会识别大括号里面的代码
同样我们可以知道：
@media all and (max-width:500px){
#box{ background:blue;}
}
这段代码的含义当分辨率<=500px的时候，会识别大括号里面的代码
而当我们使用外部引入css的时候，可在link标签上加这样的代码：
<link rel="stylesheet" href="hello.css" media="all and (min-width:600px)">
这是我布局响应式的css依据，接下来我给大家分享下我常用的几种css单位：
rem
rem单位是相对于字体大小的html元素，也称为根元素，也是我开发的时候经常用到的单位。
html {
font-size: 10px; /* 不建议设置 font-size: 62.5%; 在 IE 9-11 上有偏差，具体表现为 1rem = 9.93px。 */
}
.sqaure {
width: 5rem; /* 50px */
height: 5rem; /* 50px */
}
em
相对于rem是于根元素（html）的字体大小，em则是相对于其父元素的字体大小，且最多取到小数点的后三位
<style>
html{ font-size: 20px; }
body{
font-size: 1.4rem; /* 1rem = 28px */
padding: 0.7rem; /* 0.7rem = 14px */
}
div{
padding: 1em; /* 1em = 28px */
}
span{
font-size:1rem; /* 1rem = 20px */
padding: 0.9em; /* 1em = 18px */
}
</style>
<html>
<body>
<div>
<span></span>
</div>
</body>
</html>
rpx
rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx，也是我微信小程序开发的常用单位。
无论是在iPhone6上面还是其他机型上面都是750rpx的屏幕宽度，拿iPhone6来讲，屏幕宽度为375px，把它分为750rpx后， 1rpx = 0.5px = 1物理像素。
vw 和 vh
vw为视窗宽度，1vw=视窗宽度的1%
vh为视窗高度，1vh=视窗高度的1%
这是我开发最为喜欢的单位，无需做任何换算，还简单。
看到这里你可能会疑问，为什么没有px这个原始的像素单位，我这里说下我的看法，px设置字体大小时，是比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，如果改变了浏览器的缩放，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了，而我们用刚才的媒体查询来进行修改，会非常麻烦（代码量增加一倍，还没有上面的单位写的代码兼容稳定），而现在的页面开发都是需要你的代码兼容两端和各种尺寸的（手机电脑端），对于我来说，px确实已经不能作为主要开发的单位了。
以上就是我对响应式布局的理解和看法，如果有什么补充和见解，也欢迎在评论区留言。
