Question

我想知道如果我使用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只下载一次，这样可以加快网站速度，同时减少带宽。

创建.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及其所有内容。

Answer 1

以下是标准设备的媒体查询（来自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 */
}

所有说/ *样式* /的区域都是您为所支持的不同设备放置单独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 */
}

Answer 2

如果你全部打电话，他们都会被加载。最好的计划是使用media queries分隔，但在一张表中提供所有样式。

Answer 3

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

创建具有不同CSS样式的移动网页

3 个答案: