Адаптивный дизайн

[Lednar94]

Разрабатываю адаптивный дизайн для сайт при помощи CSS3 Media Queries. Сайт будет прибывать в 3 состояниях: телефон, планшет и настольный компьютер. Для планшета дизайн отличается не только тем что он резиновый но и расположением и размерами некоторых элементов в виду того что для планшета желательны крупные размеры кнопок. В дизайне для компьютера расположение и размеры другие. В среднем экран настольного компьютера имеет ширину 1280 пикселей. А ширина экрана планшетов колеблется от 768(Apple iPad в вертикальном положении) до 1280(Galaxy Tab 10.1). Проблема возникает именно в этих размерах а именно в их пересечении. То есть стили для

@media only screen and (min-width:768px) and (max-width:1280px) {
     ...
}

и для

@media only screen and (min-width:1280px) {
     ...
}

конфликтуют и дизайн ломается и на тех и на других устройствах

Как сделать так чтобы у планшета с шириной 1280 и компьютера с шириной 1280 были разные дизайны?

[Быколай]

ось определять. или браузер. яваскриптом.

[Lednar94]

Хотелось бы обойтись только с помощью css. Я думаю это вполне возможно. нельзя ли написать как то так? @media only screen and ((max-width:1279px) or (width:1280) and (height:800px)) {...} насколько я знаю таких мониторов мало. Но возможно ли в медиа запросах строить такие логические выражения?

[Быколай]

вот статья о определении браузеров средствами css http://www.xiper.net/collect/html-and-css-tricks/css-tricks/conditional-css.html , может поможет. условий, насколько знаю, нет, и быть не может, это всё таки не язык программирования.

а почему отвергаете js? он поддерживается клиентами всех устройств, который вы озвучили.

[pika]

так, между делом, сейчас очень много нетбуков развелось, и их разрешение 1024, а не 1280

[CalvinKlein]

для пк я советовал бы вам верстать не с 1280 а с 1024

[Быколай]

для пк я советовал бы вам верстать не с 1280 а с 1024

согласен. на моих проектах от 13 до 40 процентов, это 1024Х***.

[SelenIT]

1280?800 — это не только Galaxy Tab 10.1 (и ряд его конкурентов), но и львиная доля старых ноутов с экраном 15,4" и меньше (включая мой). И, честно говоря, не вижу острой нужды давать им разные дизайны. А еще вот-вот выйдет iPad 3 с аж 2048?1536 (по слухам) и запутает всё окончательно (правда, я думаю, что там будет та же ситуация, что с 4-м айфоном — "логических" пикселей, CSS-овских, там будет считаться всё равно 1024, просто шрифты будут рисоваться вдвое четче).

Можно попытаться привязаться к resolution (правда, честно не знаю, какие цифры выдают планшеты). Но вот что точно имеет смысл — разделять дизайны для "классических" и "широкоформатных" экранов (а то при фиксированной ширине на экран ноута с 1366?768 влезет сушественно меньше полезной инфы, чем на десктоп с 1280?1024). Возможно, удачная привязка к aspect-ratio/device-aspect-ratio решит обе проблемы...