Question

我正在尝试构建一个响应式网站。我知道我应该从最小到最大，从移动到平板电脑到桌面。但我不希望在移动设备上下载桌面图像以节省带宽和时间。我也知道浏览器不会向服务器发送有关自身的信息，所以我不能使用php。

简而言之，我需要一种方法来使用js来确定在加载之前加载哪个css文件。有办法吗？

Answer 1

在包含样式表的链接标记上放置媒体查询，让浏览器自行对其进行排序。这里不需要任何JS。

Answer 2

没有什么可以阻止使用JavaScript下载嵌入式图像。一些图像将在您修改DOM之前开始下载。

如果关注的是背景图像，则浏览器仅在需要时请求图像。在下面的CSS示例中，窄设备仅请求small.gif，宽设备仅请求big.gif。

.foo {
    background: url(small.gif);
}

@media (min-width: 800px) {
    .foo {
        background: url(big.gif);
    }
}

查看有关背景图片和移动设备的更多信息：http://timkadlec.com/2012/04/media-query-asset-downloading-results/

一种常见的误解是，在<link />元素中使用媒体查询会阻止样式表在设备不需要时下载，但这是错误的。浏览器会请求所有CSS文件，包括备用文件，以防浏览器稍后需要它们。

<link rel="stylesheet" href="/css/responsive.css" media="screen" title="Responsive" />
<link rel="stylesheet" href="/css/mobile.css" media="(max-width: 800px)" title="Mobile" />
<link rel="stylesheet" href="/css/desktop.css" media="(min-width: 801px)" title="Desktop" />

您可以从2个不同设备的访问日志中看到请求所有3个样式表。

Opera Mobile模拟器

10.0.0.1 - - [27/May/2013:14:26:53 -0400] "GET / HTTP/1.1" 200 - - "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:53 -0400] "GET /js/menu.js HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:53 -0400] "GET /photo_420x315.gif HTTP/1.1" 304 0 "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:53 -0400] "GET /uploads/photos/81_230x200.jpg HTTP/1.1" 200 2931 "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:53 -0400] "GET /js/modernizr/2.6.1.custom-input.js HTTP/1.1" 304 0 "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:53 -0400] "GET /js/address_picker.js HTTP/1.1" 304 0 "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:53 -0400] "GET /placeholders/728x90_banner.png HTTP/1.1" 304 0 "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:53 -0400] "GET /uploads/photos/60_230x200.jpg HTTP/1.1" 200 2818 "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:53 -0400] "GET /css/responsive.css HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:53 -0400] "GET /uploads/photos/119_230x200.jpg HTTP/1.1" 200 3223 "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:53 -0400] "GET /favicon.ico HTTP/1.1" 304 0 "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:53 -0400] "GET /css/desktop.css HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:53 -0400] "GET /css/mobile.css HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:53 -0400] "GET /uploads/photos/76_230x200.jpg HTTP/1.1" 200 2907 "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:53 -0400] "GET /js/polyfills/loader.js HTTP/1.1" 304 0 "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:53 -0400] "GET /css/mobile.css HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:53 -0400] "GET /js/polyfills/details/logifill-details-min.js HTTP/1.1" 304 0 "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:54 -0400] "GET /css/desktop.css HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:54 -0400] "GET /favicon.ico HTTP/1.1" 304 0 "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:54 -0400] "GET /uploads/photos/119_230x200.jpg HTTP/1.1" 200 3223 "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:55 -0400] "GET / HTTP/1.1" 200 - - "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:55 -0400] "GET /uploads/photos/103_230x200.jpg HTTP/1.1" 200 3368 "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"

Android模拟器

10.0.0.1 - - [27/May/2013:14:29:24 -0400] "GET / HTTP/1.1" 200 - - "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:26 -0400] "GET /css/responsive.css HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:26 -0400] "GET /js/polyfills/loader.js HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:26 -0400] "GET /js/address_picker.js HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:26 -0400] "GET /js/modernizr/2.6.1.custom-input.js HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:26 -0400] "GET /js/menu.js HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:28 -0400] "GET /js/jquery/1.7.2/jquery.min.js HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:28 -0400] "GET /js/jqueryui/1.8.1/jquery-ui.min.js HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:28 -0400] "GET /js/jqueryui/1.8.1/themes/base/jquery.ui.theme.css HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:28 -0400] "GET /js/jqueryui/1.8.1/themes/base/jquery.ui.core.css HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:28 -0400] "GET /js/jqueryui/1.8.1/themes/base/jquery.ui.datepicker.css HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:28 -0400] "GET /js/polyfills/datetime-local/datetime-local-polyfill.js HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:28 -0400] "GET /js/polyfills/datetime-local/datetime-local-polyfill.css HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:28 -0400] "GET /js/polyfills/details/logifill-details-min.js HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:28 -0400] "GET /photo_420x315.gif HTTP/1.1" 200 3115 "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:28 -0400] "GET /uploads/photos/81_230x200.jpg HTTP/1.1" 200 2931 "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:28 -0400] "GET /placeholders/728x90_banner.png HTTP/1.1" 200 24434 "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:28 -0400] "GET /uploads/photos/103_230x200.jpg HTTP/1.1" 200 3368 "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:28 -0400] "GET /uploads/photos/60_230x200.jpg HTTP/1.1" 200 2818 "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:28 -0400] "GET /uploads/photos/76_230x200.jpg HTTP/1.1" 200 2907 "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:29 -0400] "GET /css/mobile.css HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:34 -0400] "GET /apple-touch-icon-72x72.png HTTP/1.1" 200 1262 - "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:35 -0400] "GET /css/desktop.css HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"

Answer 3

不要使用js，你可以直接在你的html头中做这样的事情：

<link rel="stylesheet" href="/css/base.css">

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

所以，你只在大屏幕上加载“宽屏”css。

js加载正确的CSS

3 个答案: