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

【问题标题】：How can I change the CSS style of a page depending on the screen's width?如何根据屏幕宽度更改页面的 CSS 样式？
【发布时间】：2015-12-23 04:18:49
【问题描述】：

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

    <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）：

【问题讨论】：

标签： html css google-chrome responsive-design

【解决方案1】：

使用媒体查询。参见例如本页https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries

【讨论】：

【解决方案2】：

您的方法虽然没有错，但并不理想。当我遇到采用这种方法的网站时，我通常会遇到同样的问题。

改为制作 2 个样式表

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

确保 responsive.css 位于 main.css 下方，以便在需要时覆盖主 css。

在该样式表中执行所有响应式断点。

使用响应式框架 (Bootstrap) 可能是一个好主意，只要您使用可用的引导类，它就可以最大限度地减少您将要执行的响应式代码的数量。而且更容易维护。

如果 Bootstrap 没有您要查找的断点，我建议您查看 SASS + Susy link 使用 Susy，您可以随意映射断点，并且可以将媒体代码嵌套在您希望做出响应的元素。最简洁的方法和前端设计的未来。

【讨论】：

谢谢！我如何确保一个样式表覆盖另一个样式表？
底部样式表将覆盖顶部样式表。 “如果”你有一个顽固的属性，由于 CSS 的特殊性而没有被覆盖，使用 !important 来覆盖。但是，请谨慎使用，因为您将其设为最高权限。
我更喜欢使用特异性来覆盖某些东西，而不是使用 !important。查找 CSS 特殊性规则

【解决方案3】：

虽然您可以使用上面提到的 2 个以上的样式表 - 您可以通过使用一个来防止额外的 HTTP 请求，并放置：

@media only screen and (max-width : 851px) { /* Responsive rules here */ }

在样式表的底部。

【讨论】：