0

我想知道如果我使用 3 个不同的 css 文件，iPhone / iPad 的移动浏览器会下载所有 3 组 css 文件，还是只下载与屏幕尺寸相关的一组？通过使用这个。

<link media="only screen and (max-width: 320px)" href="iphone-portrait.css" type= "text/css" rel="stylesheet">
<link media="only screen and (min-width: 321px) and (max-width: 480px)" href="iphone-landscape.css" type= "text/css" rel="stylesheet">
<link media="only screen and (min-device-width: 481px)" href="desktop.css" type="text/css" rel="stylesheet">

我从http://www.w3schools.com/html5/html5_app_cache.asp找到了要使用的答案

即使您有 3 个不同的 css 文件用于移动设备，将 css 存储到 iphone，也会将带宽最小化为每个 css 仅下载 1 次，这将在使用更少带宽的同时加快网站速度。

创建一个 .htaccess 文件并将其放入。

AddType text/cache-manifest manifest

然后创建另一个名为 demo.manifest 的文件并放入

CACHE MANIFEST 
# v0.0.1
icon.png
desktop.css
iphone-landscape.css
iphone-portrait.css

然后在 html 页面上，您必须通过这样做来声明它。

<html manifest="demo.manifest">

更新 css 和文件后，您只需更新 demo.manifest 和浏览器，并再次下载新版本的 demo.manifest 及其所有内容。

4

3 回答 3

8

以下是标准设备的媒体查询（来自 CSS-Tricks.com）：

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

所有显示 /* Styles */ 的区域都是您为支持的不同设备放置单独的 CSS 组件的地方。

**请注意：这是一个非常复杂的媒体查询表。我通常会删除横向的东西，而 iPhone 媒体查询会处理大多数智能手机，因此通常不需要为此设置两个单独的查询。这是我通常使用的：

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
于 2012-07-03T19:19:26.000 回答
1

如果你全部调用它们，它们都会被加载。最好的计划是使用媒体查询来分离但在一张表中提供所有样式。

于 2012-07-03T18:38:05.860 回答
0

它将下载所有这些，除非您创建一些 javascript 来防止这种情况。

于 2012-07-03T18:36:15.297 回答