Каков предпочтительный способ держать CSS отдельно для портретного и альбомного режимов для iPad?

Question

Когда мы делаем сайт для iPad (я создаю другой сайт для пользователей настольных компьютеров), и мы также хотим написать разные CSS для портретного и альбомного режимов, какой метод вы бы предпочли?

Первыйметод

Мы можем хранить один CSS-файл только с одним http-запросом

<link href="style.css" rel="stylesheet" type="text/css" media="all" />

и использовать медиа-запросы внутри для разделения кода

/* CSS for landscape here */

#wrapper {width:1024px}

/* CSS for portrait here */

@media only screen and (orientation:portrait){
#wrapper {width:768px}
}

Второй метод

Мы могли бы использовать 2 файла CSS с двумя запросами http

<!--CSS for landscape-->
<style type="text/css" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)">

<!--CSS for portrait-->
<style type="text/css" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">

Какой метод вы бы предпочли и если у вас есть какие-либо предложения по улучшению, пожалуйста,скажи.

Примечание: я делаю отдельный сайт для планшетов , он не для настольных компьютеров и мобильных устройств

Редактировать 2: * В первом методе лучше указать также Landscape или нет необходимости. *

Сравните это с кодом первого метода

/* CSS for landscape here */

@media only screen and (orientation:landscape){
#wrapper {width:1024}
}

/* CSS for portrait here */

@media only screen and (orientation:portrait){
#wrapper {width:768px}
}

и это нормальноудалить style="text/css" из css ссылки?

<link href="style.css" rel="stylesheet" media="all" />

И мне следует сохранить media="all" в строкеk или это не обязательно?

Answer 1

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

Answer 2

Я предпочитаю первый метод сам, потому что мне нравится, когда все в одном месте.Что касается необходимости style="text/css", вам не нужно его иметь, по крайней мере, с доктриной HTML5, но я думаю, что это остается лучшим способом.То же самое касается media="all".