创建具有不同css风格的移动网页 [英] Creating a mobile web page with different css style
问题描述
我想知道如果我使用3个不同的css文件，iPhone / iPad的移动浏览器是否会下载全部3套css文件，或只是按照屏幕尺寸显示的相关文件？
I would like to know if I use 3 different css files, will the mobile browser of the iPhone / iPad download all 3 sets of css files, or just the one that is relevant by screen size? by using this.
<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次，这将加快网站，同时使用更少的带宽。
even if you have 3 different css files for the mobile, having css stored to the iphone, will minimize bandwidth to only 1 download of each css and this will speed up the website while using less bandwidth.
创建.htaccess文件并将其放入。
create a .htaccess file and place this in.
AddType text/cache-manifest manifest
然后创建另一个文件，称为demo.manifest，然后放入$ / b
then create another file called what ever u like demo.manifest and place in
CACHE MANIFEST
# v0.0.1
icon.png
desktop.css
iphone-landscape.css
iphone-portrait.css
然后在html页面中，您必须通过这样做来声明它。 / p>
then on the html page you have to declare it by doing this.
<html manifest="demo.manifest">
一旦你更新了css和文件，你只需要更新demo.manifest和浏览器下载新版本的demo.manifest及其所有内容。
once you update the css and files, you will just need to update the demo.manifest and the browser with download the new version of demo.manifest and all of its contents once more.
推荐答案
以下是标准设备的媒体查询（来自CSS-Tricks.com）：
Here are the media queries of standard devices (from 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组件的区域您正在支持的设备。
All of the areas that say /* Styles */ are where you would place the separate CSS components for the different devices you are supporting.
**请注意：这是一个非常复杂的媒体查询表。我通常会删除景观内容，而iPhone媒体查询会照顾大多数智能手机，因此通常不需要为此单独安装两个智能手机。这是我通常使用的：
**PLEASE NOTE: this is a pretty convoluted media query sheet. I would normally delete the landscape stuff, and the iPhone media query takes care of most smartphones, so there's normally no need to have two separate ones for that. Here is what I usually use:
/* 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 */
}
这篇关于创建具有不同css风格的移动网页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
