什么是响应式设计的好CSS断点值？

CSS断点是网站内容对设备宽度响应的点，使您可以向用户展示最佳的布局。 CSS断点也称为媒体查询断点，因为它们与@Media查询使用。

我在断点价值观的经验

我注意到在设计站点或项目时，我正在为CSS断点使用一些相当的随机值。有时，一个圆形值，例如800或1200，而其他时间则是像素的特定值，例如670。

我寻找将来要使用的最佳断点值。我研究了一段时间，并得出了这个结论。

我们有6个主要设备尺寸要担心：

• 移动肖像
• 移动景观
• 平板电脑肖像
• 平板电脑景观
• 笔记本电脑
• 桌面

这些设备对应于以下像素值：

• 小型手机：<600px
• 移动肖像：> 600px
• 移动景观：> 600px
• 平板电脑肖像：> 600px
• 平板电脑景观：> 768px
• 大笔记本电脑/台式机：> 992px
• 超大笔记本电脑和台式机：> 1200px

我不是网页设计师，所以我每天都不参与最佳实践，但是这次我决定首先设计移动设备。

使用移动优先方法（如上所述）设计时设置min-width断点。较小的设备屏幕应为默认样式。然后，对于较大的屏幕，添加和调整。

过去，我曾经为较大的屏幕设计，这是我使用的最多的，然后变小，但是设计移动优点和使用最小宽度似乎是如今最受接受和使用的解决方案。<<<<<<<<<<<<< /p>

如何在CSS中设置断点？

CSS断点可以使用min-width，max-width或两者的组合添加。建议使用移动优先方法设计布局时，建议使用最小宽度断点。我们将默认设置小屏幕设备的样式，然后添加和调整大屏幕。

什么是媒体查询？

在媒体查询中，@media规则用于将不同的样式应用于不同的媒体类型/设备。

可以使用媒体查询来检查许多事情，包括：

• 视口宽度和高度
• 设备方向（是景观或肖像模式的平板电脑/电话吗？）
• 解决方案
• 一种流行的技术，用于将量身定制的样式表（响应式网络设计）交付给台式机，笔记本电脑，平板电脑和手机是使用媒体查询。

这些是我从现在开始使用的媒体查询：

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

清楚地，不可能确定和实施CSS断点，以供所有设备进行响应式设计和媒体查询。最好的选择是使用与目标受众的设备偏好相对应的CSS媒体查询和断点。此外，保持内容的适应性和可更改将有助于从长远来看以合理的努力来实现更多。

进一步阅读

想知道如何使用媒体查询？然后查看Using media queries – CSS: Cascading Style Sheets | MDN

也可以看看

What are the 3 Ways to Style in CSS?
What are the Most Common CSS Units?
What are CSS Rules and Selectors?

如果您喜欢本文，请分享。您也可以在Twitter上找到我以获取更多更新。