响应式布局PC与手机兼容性详解
响应式布局的好处挺多，最直接的就是一套代码能兼容手机和 PC，少折腾。2010 年 Ethan Marcotte 提出来以后，就都在用，是做移动端适配。
CSS3 的Media Query算是核心技术了，你可以用@media写条件，比如屏幕小于 480 像素，就加载不同样式，页面响应也快。下面有个例子：
@media (max-width: 480px) {
body {
background: #f0f0f0;
}
}多设备显示问题也挺常见。以前要给平板、手机单独做版本，现在直接一套响应式搞定，开发流程也简化。只要写对条件，PC、iPad、安卓都能跑。
不过，兼容性坑还是有，比如老版本浏览器，样式不生效。还有加载时间会比纯 PC 站点稍长。你要注意代码不要写太复杂，不然用户体验会受影响。
如果你想深入研究，可以看看下面这些工具和资料，是Bootstrap的响应式栅格，写起来蛮方便。实在搞不定，就先用官方模板练练手，别急着全靠自己手撸。
文件大小：28.75KB
评论区