怎样用media query实现HTML5响应式布局适配更多设备？

先来看， 咱得明白，写网页不能老想着一种设备，得考虑各种屏幕较大较小，不然用户体验就不良好了。咋办呢？用media query就行了！ 弯道超车。 它能让你的网页在不同设备上都能体现得很良好，比如手机、平板、电脑等等。

为哪些要用px而不是em？

统一用 px。虽然 W3C 文档说 em 更“可访问”， 但实际中它依赖根字体较大较小，而用户缩放页面时现代化浏览器对 px 断点的处理已足够健壮。用 em 反而简单因 font-size 层层继承引起断点漂移——尤其在用了 rem 布局的项目里 @media 实际对应的是 48 × root font-size你看，这就是为啥不用em的原因!，看好你哦！

@media怎么写？怎么写对？

当前这个meta标签是关键， 你要是没写，那你的网页在手机上就体现不正常!

• 检查有没有在 或外部 CSS 文件中正确嵌套了 @media
• 确认 CSS 选择器权沉重没被更较高优先级规则覆盖
• 用 Chrome DevTools 的 “Toggle device toolbar”切换设备后看 Elements 面板右上角有没有体现当前匹配的媒体平台查询
• ...还有很更多其他注意事项呢!

响应式图片和容器怎么配合@media

我们都经历过... @media 控制布局结构，  和 srcset 控制资源条件加载——两者分工明确，别混用。比如你用 @media  把侧边栏设为 display: block; ,那对应的较大图就应当用 srcset 提供给更较高分辨率版本，而不是靠媒体平台查询去换 background-image;

主流断点不是凭空定的...

别一上来就堆 max-width 和 min-width,先想清楚设备真实实 viewport 较宽度和用户交互方式。主流断点不是凭空定的， 而是基于常见设备的 CSS 像素较宽度， 恕我直言... 再结合内容可读性微调.实际项目中，推荐从移动优先起步，用 @media  覆盖平板，@media  覆盖桌面比坚硬套“手机/平板/桌面”三档更可靠。

---

: 这是关于em的阐述， 你看看就了解了! : 关于CSS选择器权沉重，你能够看看这篇文章... : 主流断点其实是根据统计数据来的，你要了解的话，能够去看看统计报告。

一下:

• 要用@media实现响应式布局;
• 要考虑各种设备的屏幕较大较小;
• 不要遗忘viewport meta标签!
• 要用对px和em;
• 要注意CSS选择器权沉重;
• 别忘了用Chrome DevTools调试!
...还有很更多其他注意事项呢! ~~完~~ ` ` `

---