Ekranowe i mobilne arkusze stylów

Przejrzałem tematy związane z przepełnieniem stosu w tym pytaniu, a także niektóre wyniki wyszukiwania Google, ale nie mogę rozwiązać mojego problemu.Ekranowe i mobilne arkusze stylów

Utworzyłem arkusz stylów dla urządzeń mobilnych (mobile.css), który jest zasadniczo kopią pliku main.css ze zmianami wielu atrybutów. Gdy ładuję tylko plik mobile.css jako arkusz stylów, wygląda świetnie na moim iPhonie, tak jak tego chcę. Jednak gdy włożę oba, otrzymuję mieszankę obu, ale więcej głównych.css

Każdy pomysł, dlaczego?

<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>

Źródło

2011-09-20 xIlluzionx

Jak "wkładasz obie"? – Blender

Mój kod nie wyświetla się z jakiegoś powodu, kiedy go opublikowałem ... Czy możesz spojrzeć na źródło na: www.cuhvz.com/sandbox/home.php – xIlluzionx

Naprawiono. Teraz powinno działać. – Blender

Według documents, składnia ładuje inny plik w konkretnym urządzeniu/warunek tak:

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

Spowoduje to załadowanie tylko jednego pliku css dla każdej pojedynczej wartości width

W przypadku iPhone 4 i iPod touch nowej generacji, które mają wyświetlacz Retina, należy zwrócić uwagę. Szerokość iPhone'a 4 wynosi 640 pikseli, dlatego wielu programistów nie liczy tej szerokości jako szerokości przeglądarki mobilnej. Jeśli dodasz to poniżej metatagu w problemie z dokumentem, zostanie rozwiązany:

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

Ten metatag wpłynie na jakość zdjęć. Jeśli chcesz rozwiązać ten problem, musisz przeczytać o tym numerze: here.

Źródło

2011-09-20 04:00:33 Mohsen

Niestety, żaden znacznik nie został opublikowany z jakiegoś powodu, być może zapomniałem sformatować go jako kod. (www.cuhvz.com/sandbox/home.php) – xIlluzionx

Musisz dodać ekran 'media =" i (min-szerokość: 480px) "' do twojego 'main.css' – Mohsen

Robiąc pierwszą rzecz, o której mówisz, zadziałało! – xIlluzionx

Trudno wiedzieć bez żadnych znaczników, ale zgaduję, należy zrobić coś takiego:
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)" />

Źródło

2011-09-20 03:59:42

Niestety, żaden z tych znaczników nie został opublikowany z jakiegoś powodu, być może zapomniałem sformatować go jako kod. (www.cuhvz.com/sandbox/home.php) – xIlluzionx

@ scott; może trzeba zdefiniować mobile.css po main.css tak:

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

lub można zdefiniować mobile css w main.css tak:

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

EDIT:

napisać ten <!DOCTYPE html> zamiast <DOCTYPE html> w swoim html.

Źródło

2011-09-20 04:01:55 sandeep

Mobilny stylów jest ładowany warunkowo, co oznacza, że komputer będzie ładować tylkomain.css, podczas gdy iPhone będzie załadować zarównomain.css i mobile.css.

Jeśli chcesz zacząć od zera, gdy załadować stronę na iPhone, wystarczy dodać ten kawałek CSS do góry 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}

Skutecznie resetuje CSS.

Źródło

2011-09-20 04:18:55 Blender

Ekranowe i mobilne arkusze stylów

Odpowiedz

Powiązane problemy