Question

所以当用户让窗口缩小几十个像素时，我希望css能够改变。但我不知道我需要使用的宽度是多少。我的显示器是1440x900，但其他人有1920x1080 ......让我们不要忘记4K显示器。我放在这里的宽度是多少？

    @media screen and (max-width:.....?){}

Answer 1

当您确保页面在每个宽度上都看起来很好，而不仅仅是特定的分辨率时，您将获得最佳效果。这意味着你开始减小窗口宽度，当它看起来很糟糕时，那就是当你添加媒体查询来改变某些东西时。它开始变得糟糕的时刻在每个网站上都是不同的。虽然如果您发现自己必须每20个像素添加一个新断点，那么媒体查询可能不是您问题的解决方案。

如果您想以高于显示器的分辨率进行测试，可以使用Chrome的设备工具栏为视口设置自定义分辨率。

常用的断点可能是bootstrap使用的断点：991px（平板电脑）和767px（移动电话）。虽然这不一定在您的网站中使用是有意义的。

Answer 2

首先：@media正在封装你的CSS。这意味着，如果你不使用它 - 你的CSS将是全局的，除非它被覆盖。

现在，您可以使用多个@media查询，这样您就可以在不同的设备上使您的网站看起来很好。虽然应该设计得很好，但是你不需要为每100次px更改编写@media 。

如果您没有特定需求，可以按照Twitter Bootstrap模式进行操作：

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) { }
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) { }
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) { }
/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) { }
/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) { }

Answer 3

我不打算添加100个媒体查询。只是因为我有2排非常接近窗口边框的iframe，当我把它缩小一点时，它们开始看起来很糟糕。我必须使它至少小600像素，让网站再次看起来很糟糕。我可能只会使用2个媒体查询。也许是3，但我对此表示怀疑。

Answer 4

@media查询是响应式设计的1/3。它是最简单形式的关键因素，它允许根据设备应用指定的CSS以及它是否与媒体查询标准相匹配。

所有受欢迎的断点都在下面

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ }

/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) { /* Styles */ }

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) { /* Styles */ }

什么是CSS的标准最大宽度

4 个答案: