我如何根据设备的屏幕尺寸包括CSS [英] how do i include css based on screen size of the device

问题描述

我如何根据用于查看网页的设备的屏幕尺寸包括CSS？

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

我要记住的是，我内部仅包含一个CSS页面和该css文件中有一个参数，可根据屏幕尺寸选择要导入的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（最大是2，一个用于引导程序之类的框架，另一个用于基于screensize的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，而在您要导入其他具有不同屏幕尺寸的CSS文件的css文件，例如，对于小于960px的屏幕，您可以这样做

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

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

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

}

此外，如果您通常只想使用两个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 :)

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

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/

例如，您可以指定要在哪个屏幕尺寸上显示CSS文件；

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

<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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！