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

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/