如何根据设备的屏幕尺寸包含css

How do i include css based on the screen size of the devices for viewing web pages?

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

What i have in mind is that i will only include one css inside a page and inside that css file there is an argument that choose which css to import based on the screen size.

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

Another one of my goal is to lessen the css(maximum is 2, one for the framework like bootstrap and one for the css selector based on screensize) being loaded on a page to reduce load times.

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

I still have no codes for this yet as i do not know how to do it.

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

4 个解决方案

#1

If you want to have only one css per page, but in that css file you want to import other css files that have differences based on screen size, you can do it like for example for screens less than 960px

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

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

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

}

Also if you want to use only two css files in general, you might want to search for media queries and work on that a little :)

另外，如果你想一般只使用两个css文件，你可能想要搜索媒体查询并稍微处理:)

There are different methods for using different styles for different devices and screens, you might find this article useful about that http://css-tricks.com/resolution-specific-stylesheets/

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

Which says, e.g, you can specify in which screen size you want to show a css file like this;

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

#2

If you're going for responsive design, you should go mainly off of screen width, not a specific screen height and width. Try googling "media queries conditionally load css" and will come up with a lot of examples. The gist is:

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

Only one of those will ever load. http://christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries/

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

Don't use @import. It will slow your page down. http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

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

#3

You can try this for different screes size to use different css style

您可以尝试使用不同的screes大小来使用不同的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 */
}

#4

You can either load in another css file, (device.css) or just add it to the bottom of your css. Media queries control what css is used at which pixel width.

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

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

will target anything under 600px

将目标锁定在600px以下

#1