想让网页在一堆不同的设备上合理展示，只需要在最终产品上添加一点 CSS 媒体查询就可以了。这件事情之所以这么简单，关键在于我们的布局原本就是弹性可伸缩的。因此，优化网页在小屏幕上的表现，其实只意味着把一些外边距收拢到最小程度，然后把因为屏幕太窄而无法显示成双列的侧栏调整为单列布局而已。"

在《css揭秘》一书中关于响应式布局推荐有一些布局建议：

1. 使用百分比长度来取代固定长度。如果做不到这一点，也应该尝试使用与视口相关的单位（ vw、vh、vmin 和 vmax ），它们的值解析为视口宽度或者高度的百分比。
2. 当你需要在较大分辨率下得到固定宽度时，使用max-width而不是width，因为它可以适应较小的分辨率，而无需使用媒体查询。
3. 不要忘记为替换元素（ 比如 img、object、video、iframe等 ）设置一个 max-width，值为100%
4. 假如背景图片需要完整地铺满一个容器，不管容器的尺寸如何变化，background-size:cover; 这个属性都可以做到。但是，我们也要时刻牢记--带宽并不是无限的，因此在移动网页中通过 css 把一张大图缩小显示往往是不明智的。
5. 当图片（ 或其他元素 ）以行列式进行布局时，让视口的宽度来决定列的数量。弹性盒布局（ 即Flexbox ）或者 display:inline-block; 加上常规的文本折行行为，都可以实现这一点。
6. 在使用多行文本时，指定 column-width （ 列宽 ）而不是指定 column-count（ 列数 ），这样它就可以在较小的屏幕上自动显示为单例布局。

移动端常用媒体查询

html {
 font-size: 16px;
}
@media only screen and (min-width: 320px) {
 html {
 font-size: 13.6533px !important;
 }
}
@media only screen and (min-width: 360px) {
 html {
 font-size: 15.36px !important;
 }
}
@media only screen and (min-width: 375px) {
 html {
 font-size: 16px !important;
 }
}
@media only screen and (min-width: 400px) {
 html {
 font-size: 17.0667px !important;
 }
}
@media only screen and (min-width: 414px) {
 html {
 font-size: 17.664px !important;
 }
}
@media only screen and (min-width: 480px) {
 html {
 font-size: 20.48px !important;
 }
}
@media only screen and (min-width: 750px) {
 html {
 font-size: 32px !important;
 }
}

媒体查询less写法：

@device-bps: 320px, 360px, 375px, 400px, 414px, 480px, 750px;
.html-font-size(@i, @design-font-size, @design-width) when (@i <=length(@device-bps)) {
 @bp: extract(@device-bps, @i);
 @font: round(@bp / @design-width * @design-font-size, 4);
 @media only screen and (min-width: @bp) {
 html {
 font-size: @font !important;
 }
 }
 .html-font-size((@i + 1), @design-font-size, @design-width);
}
.html-font-size(@design-font-size, @design-width) {
 html {
 font-size: @design-font-size;
 }
 .html-font-size(1, @design-font-size, @design-width);
}
.px2rem(@name, @px, @design-font-size) {
 @{name}: 1rem * round(@px / @design-font-size, 2);
}
@design-font-size : 16px;
@design-width : 375px;
.px2rem(@name, @px) {
 .px2rem(@name, @px, @design-font-size);
}