如何根据屏幕宽度改变页面的CSS样式？

Question

我正在制作一个网站，需要让网站具有响应式设计，因此需要根据屏幕宽度更改CSS。在HTML中有3个样式表，分别是主要样式表、普通版本和移动版本：

    <link rel="stylesheet" href="stylesheet/main.css" />
    <link rel="stylesheet" href="stylesheet/style.css" media="(min-width: 851px)" type="text/css" />
    <link rel="stylesheet" href="stylesheet/mobile.css" media="(max-width: 850px)" type="text/css" />

我使用这个时，总是会确保它在改变页面宽度时能正常工作，并且我看到它可以正常工作。然而，在使用Chrome的仿真模式（检查元素-〉启用仿真）并且屏幕宽度小于某个样式表的最大宽度时，网页仍然保持“正常”模式，我的响应式设计没有任何效果。我应该在CSS中使用这个（作为一个大文件）吗：

    @media only screen and (max-width : 851px) {}

普通模式（大屏幕）：

当我改变宽度（大屏幕）：

仿真模式（iPad）：

- FlipFloop

Answer 1

使用媒体查询。请参考这个页面 https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries

- Pavel Gatnar

Answer 2

您的方法虽然不是错的，但也不够理想。当我遇到使用这种方法的网站时，通常会遇到相同的问题。

相反，可以制作两个样式表。

<link rel="stylesheet" href="stylesheet/main.css" />
<link rel="stylesheet" href="stylesheet/responsive.css" />

请确保responsive.css在main.css之后，这样如果需要覆盖主要的css，它就可以覆盖。

在那个样式表中设置所有响应式断点。

最好使用响应式框架（Bootstrap），这样你将会少写很多响应式代码，只要你利用可用的bootstrap类即可。而且更容易维护。

如果Bootstrap没有您所需的断点，请考虑使用SASS + Susy link。通过Susy，您可以以任何想要的方式映射断点，并且可以在要响应地处理的元素内嵌套您的媒体代码。这是最整洁的方法，也是前端设计的未来。

- LOTUSMS

---

谢谢！我该如何确保一个样式表覆盖另一个呢？ - FlipFloop

底部的样式表将覆盖顶部的样式表。如果由于CSS特异性而无法覆盖某个属性，请使用!important来覆盖。但是，要注意节制使用，因为它会成为最高权限。 - LOTUSMS

我更喜欢使用特定性来覆盖某些东西，而不是使用!important。请查阅CSS特定性规则。 - LOTUSMS

Answer 3

虽然您可以像上面提到的那样使用2个或更多的样式表，但是您可以通过只使用一个样式表并将以下内容放置在底部来避免额外的HTTP请求：

@media only screen and (max-width : 851px) { /* 在此处添加响应式规则 */ }

- bruh