Question

我创建了2个不同版本的网站，一个用于笔记本电脑屏幕尺寸，另一个用于手机屏幕尺寸（平板电脑屏幕尺寸，顺便说一下）。因此，我想知道您是否可以告诉我我应该如何使用javascript（因为我感觉可以通过javascript完成），以便将应该用于笔记本电脑和如果用户通过手机打开我的网站，则打开的文件将是手机尺寸屏幕上的文件。我希望你能回答我的问题。

非常感谢您！

PS：我阅读了有关@media的内容，但仍在尝试弄清楚。 PS2：如果您需要我发布任何代码，请告诉我您可能需要哪一部分，我会很乐意发布。

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

当涉及到响应时，请尽量避免使用JavaScript，可以使用CSS媒体查询来做到这一点，您可以在此处了解更多信息： https://www.w3schools.com/css/css3_mediaqueries_ex.asp 或者您可以采用框架方法，例如引导程序。

Answer 3

您可以使用媒体查询来导入不同的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

Answer 4

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

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工作表，取决于屏幕大小，使用javascript

5 个答案: