根据屏幕大小不同 CSS sheet，使用 javascript

Question

我创建了 2 个不同版本的网站，一个用于笔记本电脑屏幕尺寸，一个用于手机屏幕尺寸（平板电脑屏幕尺寸，即将推出）。所以，我想知道你是否可以告诉我我应该如何使用 javascript（因为我觉得可以通过 javascript 来完成）以便作为主要网页文件这应该是用于笔记本电脑的，如果用户通过他们的手机打开我的网站，将打开的文件将是用于移动尺寸屏幕的文件。我希望你能明白我的问题。

非常感谢您！

PS：我阅读了一些关于@media 的内容，但仍在尝试解决问题。 PS2：如果您需要我 post 任何代码，请告诉我您可能需要哪一部分，我很乐意 post 它。

Answer 1

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

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

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

示例等等，here

Answer 2

我认为如果您使用 bootstrap，您可以轻松快速地管理您的需求。请参考以下 link 来了解 - https://getbootstrap.com/docs/3.3/css/

Answer 3

在响应方面，尽可能避免 javascript，您可以使用 css 媒体查询来实现，您可以在此处了解更多信息： https://www.w3schools.com/css/css3_mediaqueries_ex.asp 或者您可以采用框架方法，例如 bootstrap。

Answer 4

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

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

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

Answer 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');
}

根据屏幕大小不同 CSS sheet，使用 javascript

Different CSS sheet depending on screen size, using javascript

html

javascript

css

resize