CSS自适应网站布局媒体查询如何设置断点

如何选择断点？(来源)

根据内容创建断点，绝对不要根据具体设备、产品或品牌来创建。

从针对最小的移动设备进行设计入手，然后随着屏幕类型不断增加而逐渐改善体验。

使每行的文字最多为 70 或 80 个字符左右。

以小屏幕开始，不断扩展的方式选择主要断点

必要时选择小断点

优化文本，提高可读性

理想栏目的每一行应该包含 70 到 80 个字符（大约 8 到 10 个英文单词），因此，每次文本块宽度超过 10 个单词时，就应考虑添加断点。

决不能完全隐藏内容

自适应布局使用相对大小数值来设定元素大小，以防打乱布局。

Bootstrap移动优先的内体查询断点设置

/* 超小屏幕（手机，小于 768px） */

/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */

@media (min-width: @screen-sm-min) { … }

/* 中等屏幕（桌面显示器，大于等于 992px） */

@media (min-width: @screen-md-min) { … }

/* 大屏幕（大桌面显示器，大于等于 1200px） */

@media (min-width: @screen-lg-min) { … }

参考链接