我想知道如果我使用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及其所有内容.