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

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

如何选择断点

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

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

动态断点设置

在实际应用过程中，用户会根据需要改变浏览器默认文字大小 ，若让断点能够随着文字的变化而变化，用户体验更佳。

那么如何让断点随着文字大小变化而变化呢？
我们假设，

设置的断点为，(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) {}

与君共勉：再牛逼的梦想，也抵不住傻逼般的坚持！