Screen and Mobile Stylesheets

问题

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>

回答1:

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.

回答2:

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

<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)" />

回答3:

Your mobile stylesheet is loaded conditionally, which means that the computer will load only the main.css, while the iPhone will load both main.css and 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:

/*
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.

回答4:

@scott; may be you have to define your mobile.css after main.css like this:

<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 css in your main.css like this:

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

EDIT:

write this <!DOCTYPE html> instead of <DOCTYPE html> in your html.

来源：https://stackoverflow.com/questions/7479849/screen-and-mobile-stylesheets

标签

css

mobile

screen

stylesheet