CSS 屏幕和移动样式表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7479849/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Screen and Mobile Stylesheets
提问by xIlluzionx
I've looked through the stack overflow topics on this question, as well as some google search results but I can't seem to solve my issue.
我已经浏览了关于这个问题的堆栈溢出主题，以及一些谷歌搜索结果，但我似乎无法解决我的问题。
I've created a stylesheet for mobile devices(mobile.css) which is essentially a copy of my main.css with changes to many of the attributes. When I load only mobile.css as the stylesheet it looks great on my iPhone, just how I want it to. However when I put both in, I am getting a mix of both, but more of the main.css
我已经为移动设备（mobile.css）创建了一个样式表，它本质上是我的 main.css 的副本，其中更改了许多属性。当我只加载 mobile.css 作为样式表时，它在我的 iPhone 上看起来很棒，正是我想要的。然而，当我把两者都放进去时，我得到了两者的混合，但更多的是 main.css
Any idea why?
知道为什么吗？
<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>
回答by Mohsen
According to documents, syntax of loading another file in specific device/condition is like this:
根据文档，在特定设备/条件下加载另一个文件的语法如下：
<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" />
This will load only one css file for every single amount of width
这将只为每一个数量加载一个 css 文件 width
For iPhone 4 and new generation iPod touch that have Retina display there is something that you should note. iPhone 4 width is 640pixels that many developers don't count this width as a mobile browser width. If you add this below meta tag in your document problem will be solved
对于配备 Retina 显示屏的 iPhone 4 和新一代 iPod touch，您应该注意一些事项。iPhone 4 宽度是640像素，许多开发人员不将此宽度视为移动浏览器宽度。如果您在文档中添加以下元标记，问题将得到解决
<meta name="viewport" content="width=320">
This meta tag will impact your images quality. If you want to fix that problem then you need to read about this here.
此元标记会影响您的图像质量。如果您想解决该问题，那么您需要在此处阅读有关内容。
回答by James Khoury
Its hard to know without any markup but i'm guessing you should do something like:
http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries
没有任何标记很难知道，但我猜你应该做这样的事情：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)" />
回答by sandeep
@scott; may be you have to define your mobile.cssafter main.csslike this:
@斯科特；可能你必须像这样定义你的mobile.css后main.css：
<link rel="stylesheet" href="main.css" media="screen" />
<link rel="stylesheet" href="mobile.css" media="screen and (max-device-width: 480px)" />
or you can define your mobile cssin your main.csslike this:
或者您也可以定义mobile css你main.css是这样的：
@media screen and (max-device-width: 480px){
body {
background: #ccc;
}
}
EDIT:
编辑：
write this <!DOCTYPE html>instead of <DOCTYPE html>in your html.
写这个<!DOCTYPE html>而不是<DOCTYPE html>在你的html中。
回答by Blender
Your mobile stylesheet is loaded conditionally, which means that the computer will load onlythe main.css, while the iPhone will load bothmain.cssand mobile.css.
你的手机样式有条件加载，这意味着电脑将加载只的main.css，而iPhone将加载都main.css和mobile.css。
If you want to start from scratch when you load the page on the iPhone, just add this chunk of CSS to the top of your 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}
It effectively resets the CSS.
它有效地重置了 CSS。
