屏幕和移动样式表答案

【问题标题】：Screen and Mobile Stylesheets屏幕和移动样式表
【发布时间】：2011-09-20 03:39:04
【问题描述】：

我查看了关于这个问题的堆栈溢出主题，以及一些谷歌搜索结果，但我似乎无法解决我的问题。

我为移动设备创建了一个样式表 (mobile.css)，它本质上是我的 main.css 的副本，其中许多属性都进行了更改。当我只加载 mobile.css 作为样式表时，它在我的 iPhone 上看起来很棒，就像我想要的那样。但是，当我将两者都放入时，我得到了两者的混合，但更多的是 main.css

知道为什么吗？

<head>
<link rel="stylesheet" href="styles/main.css" type="text/css" media="screen" />
<link rel='stylesheet' media='screen and (max-device-width: 480px)' href='styles/mobile.css' type='text/css' />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

【问题讨论】：

我的代码在我发布时由于某种原因没有显示...你能看看源代码吗：www.cuhvz.com/sandbox/home.php
已修复。它现在应该可以工作了。

标签： css mobile screen stylesheet

【解决方案1】：

根据documents，在特定设备/条件下加载另一个文件的语法是这样的：

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="only screen and (max-width: 400px)" href="mobile.css" />
<link rel="stylesheet" media="only screen and (min-width: 401px)" href="desktop.css" />

这将只为每一个width 加载一个 css 文件

对于配备 Retina 显示屏的 iPhone 4 和新一代 iPod touch，您应该注意一些事项。 iPhone 4 的宽度为640 像素，许多开发人员不将此宽度计为移动浏览器宽度。如果您在文档中添加以下元标记，问题将得到解决

<meta name="viewport" content="width=320">

此元标记会影响您的图像质量。如果你想解决这个问题，那么你需要阅读这个here。

【讨论】：

抱歉，由于某种原因没有发布任何标记，也许我忘记将其格式化为代码。 (www.cuhvz.com/sandbox/home.php)
您需要将media="screen and (min-width: 480px)" 添加到您的main.css
添加了<meta name="viewport" content="width=device-width, initial-scale=1">——人们从谷歌那里得到这个答案并盲目地复制粘贴——没有这行代码就不能正常工作。
我有一个问题。如果我将这些样式表分开，它会使网站更快还是只会让它加载更多的样式表？

【解决方案2】：

没有任何标记很难知道，但我猜你应该这样做：
http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

<link rel="stylesheet" href="base.css" /> // has all the common classes
<link rel="stylesheet" href="mobile.css" media="screen and (max-device-width: 320px)" />
<link rel="stylesheet" href="largescreen.css" media="screen and (min-device-width: 321px)" />

【讨论】：

抱歉，由于某种原因没有发布任何标记，也许我忘记将其格式化为代码。 (www.cuhvz.com/sandbox/home.php)

【解决方案3】：

您的移动样式表是有条件加载的，这意味着计算机将仅加载main.css，而iPhone 将同时加载main.css 和mobile.css .

如果你想在 iPhone 上加载页面时从头开始，只需将这段 CSS 添加到 mobile.css 的顶部即可：

/*
YUI 3.4.0 (build 3928)
Copyright 2011 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}

它有效地重置了 CSS。

【讨论】：

【解决方案4】：

@斯科特;可能你必须像这样在main.css 之后定义你的mobile.css：

<link rel="stylesheet" href="main.css" media="screen" /> 
<link rel="stylesheet" href="mobile.css" media="screen and (max-device-width: 480px)" />

或者您可以像这样在main.css 中定义您的mobile css：

@media screen and (max-device-width: 480px){
  body {
    background: #ccc;
  }
}

编辑：

在您的 html 中写下 <!DOCTYPE html> 而不是 <DOCTYPE html>。

【讨论】：