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

如何选择断点？(来源)

• 根据内容创建断点，绝对不要根据具体设备、产品或品牌来创建。
• 从针对最小的移动设备进行设计入手，然后随着屏幕类型不断增加而逐渐改善体验。
• 使每行的文字最多为 70 或 80 个字符左右。

1. 以小屏幕开始，不断扩展的方式选择主要断点
2. 必要时选择小断点

3. 优化文本，提高可读性

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

4. 决不能完全隐藏内容
5. 自适应布局使用相对大小数值来设定元素大小，以防打乱布局。

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) { … }

参考链接