不同的 CSS 表取决于屏幕大小，使用 javascript答案

【问题标题】：Different CSS sheet depending on screen size, using javascript不同的 CSS 表取决于屏幕大小，使用 javascript
【发布时间】：2018-08-17 11:27:52
【问题描述】：

我创建了 2 种不同版本的网站，一种适用于笔记本电脑屏幕尺寸，另一种适用于手机屏幕尺寸（平板电脑屏幕尺寸，正在开发中）。所以，我想知道你是否能告诉我我应该如何使用 javascript（因为我觉得可以通过 javascript 完成）以便将应该用于笔记本电脑的主网页文件和如果用户通过他们的手机打开我的网站，将打开的文件将是手机尺寸屏幕的文件。我希望你能得到我的问题。

非常感谢您！

PS：我读过一些关于@media 的文章，但仍在试图弄清楚。 PS2：如果您需要我发布任何代码，请告诉我您可能需要哪个部分，我很乐意发布。

【问题讨论】：

检查这个 - responsivedesign.is/develop/browser-feature-support/…
谢谢@TiagoMartinho。现在，你能告诉我应该把媒体放在哪里吗？在我的手机屏幕 .html 或笔记本电脑屏幕 .html 文件中？我应该将媒体 { } 和括号内的 css 样式放在一起吗？
如果除了 HTML 之外还有 CSS，建议您将媒体查询放在该 CSS 文件中。
检查这个 - youtube.com/watch?v=2KL-z9A56SQ
说实话，我没有单独拥有它们，但这样做很容易管理。我试试看！谢谢

标签： javascript html css resize

【解决方案1】：

您可以使用媒体查询来导入不同的 CSS 文件，具体取决于屏幕大小。这将在没有 javascript 的情况下工作，并且在我看来将是首选方法。

您的网站可以在标头的标记中包含以下代码：

/* Everything 1000px and lower */ @import url("./mobile.css") only screen and (max-width: 1000px);

如果满足媒体查询，这将加载另一个样式表。

您可以在此处阅读有关媒体查询的更多信息： https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

【讨论】：

【解决方案2】：

在您的 CSS 文件中使用媒体查询：

@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}

@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

示例和更多，here

【讨论】：

谢谢@Damian。我已经知道了，但就我而言，它不像背景颜色那么简单。如果用户通过手机或笔记本电脑屏幕打开我的网站，我需要一些可以提取不同 .html 文件的东西

【解决方案3】：

在响应式方面，尽可能避免使用 javascript，您可以使用 css 媒体查询来做到这一点，您可以在此处了解更多信息： https://www.w3schools.com/css/css3_mediaqueries_ex.asp 或者你可以选择框架方法，例如引导程序。

【讨论】：

【解决方案4】：

我认为如果您使用引导程序，您可以轻松快速地管理您的需求。请参阅以下链接以获取想法 - https://getbootstrap.com/docs/3.3/css/

【讨论】：

谢谢@YMA。我去看看有没有用
首先你要学习引导网格系统。请关注getbootstrap.com/docs/4.1/layout/grid

【解决方案5】：

您可以使用媒体查询来处理网页上的 css

// 适用于 Ipad 纵向和横向

@media screen and (min-width: 768px) and (max-width: 1024px) {

}

// 适用于 iPhone 和更小的设备

@media screen and (max-width: 767px) {

}

还要处理 javascript，您需要在 jquery 中使用设备宽度

if ($(window).width() < 767) {
   alert('Less than 767');
}
else {
   alert('More than 767');
}

【讨论】：