屏幕和移動樣式表

我已經瀏覽了這個問題的堆棧溢出主題，以及一些谷歌搜索結果，但我似乎無法解決我的問題。屏幕和移動樣式表

我爲移動設備（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>

來源

2011-09-20 xIlluzionx

你怎麼「把兩個都放進去」？ – Blender

我的代碼因爲某些原因沒有出現在我發佈的時候......你可以看看源代碼：www.cuhvz.com/sandbox/home.php – xIlluzionx

修正了它。它現在應該工作。 – Blender

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

這將只加載一個css文件的每一個單一的金額width

對於iPhone 4和具有Retina顯示屏的新一代iPod touch，您應該注意一些事項。 iPhone 4的寬度爲640像素，因此許多開發人員不會將此寬度計爲移動瀏覽器寬度。如果您在文檔的問題添加此下方meta標籤都將迎刃而解

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

這個元標記會影響您的圖像質量。如果你想解決這個問題，那麼你需要閱讀關於這個here。

來源

2011-09-20 04:00:33 Mohsen

對不起，由於某種原因沒有發佈標記，也許我忘了將其格式化爲代碼。（www.cuhvz.com/sandbox/home.php） – xIlluzionx

你需要在你的'main.css'中添加'media ='screen和（min-width：480px）''' – Mohsen

你做的第一件事情就是工作！ – xIlluzionx

它很難知道沒有任何標記，但我猜你應該這樣做：
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)" />

來源

2011-09-20 03:59:42

對不起，沒有任何標記由於某種原因發佈，也許我忘了將其格式化爲代碼。（www.cuhvz.com/sandbox/home.php） – xIlluzionx

@scott;可能是你有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)" />

，或者你可以定義你mobile css你main.css這樣的：

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

編輯：

寫這個<!DOCTYPE html>而不是你的html中的<DOCTYPE html>。

來源

2011-09-20 04:01:55 sandeep

你的移動樣式表有條件地加載的，這意味着該計算機將加載僅的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。

來源

2011-09-20 04:18:55 Blender

屏幕和移動樣式表

回答

相關問題