Экранные и мобильные таблицы стилей - PullRequest
Новая
       27

Экранные и мобильные таблицы стилей

19 голосов
/ 20 сентября 2011

Я просмотрел темы по переполнению стека по этому вопросу, а также некоторые результаты поиска в Google, но не могу решить свою проблему.

Я создал таблицу стилей для мобильных устройств (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>

Ответы [ 4 ]

31 голосов
/ 20 сентября 2011

Согласно документам , синтаксис загрузки другого файла в определенное устройство / условие выглядит следующим образом: 

<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 и iPod touch нового поколения с дисплеем Retina есть кое-что, на что стоит обратить внимание.Ширина iPhone 4 составляет 640 пикселей, поэтому многие разработчики не считают эту ширину шириной мобильного браузера.Если вы добавите метатег ниже в ваш документ, проблема будет решена 

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

Этот метатег повлияет на качество ваших изображений.Если вы хотите решить эту проблему, вам нужно прочитать об этом здесь .

3 голосов
/ 20 сентября 2011

Трудно узнать без какой-либо разметки, но я думаю, вы должны сделать что-то вроде:
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)" />
0 голосов
/ 20 сентября 2011

Ваша таблица стилей для мобильных устройств загружена условно, что означает, что компьютер будет загружать только 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.

0 голосов
/ 20 сентября 2011

@ Скот; может быть, вам нужно определить 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)" />

или вы можете определить свой mobile css в вашем main.css следующим образом: 

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

EDIT:

напишите это <!DOCTYPE html> вместо <DOCTYPE html> в вашем html.

...