Html 如何根据设备的屏幕大小包含css

如何根据查看网页设备的屏幕大小包含css

我想的是，我将只在一个页面中包含一个css，在该css文件中，有一个参数根据屏幕大小选择要导入的css

我的另一个目标是减少页面上加载的css（最大值为2，一个用于bootstrap之类的框架，另一个用于基于屏幕大小的css选择器），以减少加载时间

---

我还没有这方面的代码，因为我不知道如何做。

如果您希望每页只有一个css，但在该css文件中，您希望导入基于屏幕大小不同的其他css文件，您可以这样做，例如对于小于960px的屏幕

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

/* your imports */
@import url('/css/styles1.css');
@import url('/css/styles2.css');

}

另外，如果您通常只想使用两个css文件，您可能需要搜索媒体查询，并稍微处理一下：）

对于不同的设备和屏幕使用不同的样式有不同的方法，您可能会发现本文在这方面很有用

也就是说，例如，你可以指定你想要显示css文件的屏幕大小，就像这样

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

---

如果你想要响应性设计，你应该主要关注屏幕宽度，而不是特定的屏幕高度和宽度。试着用谷歌搜索“媒体查询有条件加载css”，会得到很多例子。要点是:

<link rel="stylesheet" media="screen and (min-width: 601px)" href="desktop.css" />
<link rel="stylesheet" media="screen and (max-width: 600px)" href="mobile.css" />

其中只有一个会加载

---

不要使用

@import

。这会降低你的页面速度

对于不同大小的屏幕，您可以尝试使用不同的css样式

/* min size style*/
@media screen and (max-width:320px) {
   /* put your css style in there */
}

/* middle size style */
@media screen and (min-width:321px) {
   /* put your css style in there */
}

/* large size style */
@media screen and (min-width:800px) {
   /* put your css style in there */
}

---

您可以加载另一个css文件（device.css），也可以将其添加到css的底部。媒体查询控制在哪个像素宽度使用什么css

@media (max-width: 600px) { 
/* Insert Code Here */
}

---

将目标锁定在600px以下的任何内容

您可能需要查看媒体查询-尽管关于@import的链接可能重复，但它确实很旧。我刚刚在Firefox“网络”上查看了一下，页面上同时加载了这两种浏览器