Question

如何根据用于查看网页的设备的屏幕尺寸包含css？

我想到的是，我只会在页面中包含一个css，并且在css文件中有一个参数可以根据屏幕大小选择要导入的css。

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

我仍然没有这方面的代码，因为我不知道该怎么做。

Answer 1

如果你想每页只有一个css，但是在那个css文件中你想要导入其他根据屏幕大小有差异的css文件，你可以像屏幕上那样做小于960px

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

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

}

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

对于不同的设备和屏幕使用不同的样式有不同的方法，您可能会发现本文对http://css-tricks.com/resolution-specific-stylesheets/

有用

其中说，例如，您可以指定要在哪个屏幕尺寸中显示这样的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' />

Answer 2

如果您要进行响应式设计，则应主要使用屏幕宽度，而不是特定的屏幕高度和宽度。尝试谷歌搜索“媒体查询有条件地加载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" />

其中只有一个会加载。 http://christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries/

请勿使用@import。它会减慢你的页面速度。 http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Answer 3

您可以尝试使用不同的屏幕尺寸来使用不同的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 */
}

Answer 4

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

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

将定位600px以下的任何东西

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

4 个答案: