响应式开发——媒体查询断点设置实例

 关于媒体查询中断点的设置，有两个点需要格外注意！

如何选择断点

一般情况下，建议根据屏幕尺寸进行断点分割，不要针对特定设备分割。

根据设计稿选择合适的断点。

动态断点设置

在实际应用过程中，用户会根据需要改变浏览器默认文字大小 ，若让断点能够随着文字的变化而变化，用户体验更佳。
假设设置的断点为，(max-width: 800px) (min-width: 481px and max-width: 800px) (max-width: 480px)

HTML字体大小为，html {font-size: 62.5%} （1rem = 16px * 62.5% = 10px）

换算成rem，(max-width: 80rem) (min-width: 48.1rem and max-width: 80rem) (max-width: 48rem)
    媒体查询的优先级比较高，并不是HTML的子元素
    这里不是根据html中字体大小设置 1rem = 10px换算 (800px / 10 = 80 rem)
    而是根据浏览器默认字体大小设置 1rem = 16px换算 (800px / 16 = 50 rem)
换算成rem，(max-width: 50rem) (min-width: 30.0625rem and max-width: 50rem) (max-width: 30rem)
    这边断点设置是根据浏览器而言，而不是根据HTML，使用rem就没有必要（rem有兼容性问题也有部分浏览器bug）
    可以直接使用em为单位
换算成em，(max-width: 50em) (min-width: 30.0625em and max-width: 50em) (max-width: 30em)

最后结果：

@media only screen and (max-width: 50em) {}

@media only screen and (min-width: 30.0625em) and (max-width: 50em) {}

@media only screen and (max-width: 30em) {}