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

Question

我正在建立一个网站，我需要网站有响应，所以我需要根据屏幕的宽度更改CSS。我有3个样式表，主要版本，普通版和移动版本，它们都出现在HTML中：

... | Where-Object Domain -match "string"

当我使用它时，我总是通过改变页面的宽度来确保它的工作原理，我发现它有效。但是，当我使用Chrome的仿真模式（检查元素 - >启用仿真），并且屏幕低于某个样式表的最大宽度时，网页会保留其正常的＆＃34;正常情况。模式和我的响应式设计没有任何效果。我应该在CSS中使用它（作为一个大文件）：

    <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" />

正常（在大屏幕上）：

当我更改宽度（大屏幕）时：

仿真模式（ipad）：

Answer 1

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

Answer 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，您可以以任何方式映射断点，并且可以嵌套媒体代码在你想要反应的元素内。前端设计的最新方法和未来。

Answer 3

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

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

位于样式表的底部。