屏幕和移动样式表 [英] Screen and Mobile Stylesheets
问题描述
我已经看过这个问题的栈溢出主题，以及一些google搜索结果，但我似乎无法解决我的问题。
我我们为移动设备创建了一个样式表（mobile.css），它基本上是我的main.css的一个副本，其中包含许多属性的变化。当我只载入mobile.css作为样式表它看起来伟大的我的iPhone，只是我想要它。但是当我把两个，我得到了两个混合，但更多的main.css
任何想法为什么？
< head>
< link rel =stylesheethref =styles / main.csstype =text / cssmedia =screen/>
< link rel ='stylesheet'media ='screen and（max-device-width：480px）'href ='styles / mobile.css'type ='text / css'/>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0/>
< / head>
根据文档，在特定设备/条件中加载另一个文件的语法如下：
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< link rel =stylesheetmedia =only screen and（max-width：400px）href =mobile.css/>
< link rel =stylesheetmedia =only screen and（min-width：401px）href =desktop.css/>
这将为每个 width 加载一个css文件。 code>
对于具有Retina显示屏的iPhone 4和新一代iPod touch，有一些值得注意的地方。 iPhone 4宽度是 640 像素，许多开发人员不把这个宽度作为移动浏览器宽度。如果您在文档中添加此下面的元标记，问题将得到解决
< meta name =viewportcontent = = 320>
此元标记会影响图片质量。如果您要解决此问题，则需要阅读此处。 p>
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
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>
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
For iPhone 4 and new generation iPod touch that have Retina display there is something that you should note. iPhone 4 width is 640 pixels 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
<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.
这篇关于屏幕和移动样式表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
