Ответственный дизайн/медиа-запросы

Question

Я искал некоторые стандарты для «Отзывчивого дизайна», и большую часть времени я получаю нечто похожее на это ->Responsive Design.

Однако! он говорит, что большинство страниц говорит, что я должен использовать следующую минимальную ширину и максимальную ширину для смартфонов, и я знаю, что МОЙ смартфон в качестве разрешения 720 x 1280 И не подходит для медиа-запроса ниже!

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
    /* Styles */ 
} 
/* Smartphones (landscape) ----------- */ 
@media only screen 
and (min-width : 321px) { 
    /* Styles */ 
} 

Каков наилучший способ пойти? Я хочу, чтобы мое устройство Android с 1280 x 720 (в альбомной ориентации), чтобы использовать один css и настольный ПК с 1280 x 720 использовать другой.

Answer 1

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

Answer 2

Это поможет вам создать медиа-запрос для устройства http://atmedia.info/

Также Media Queries для стандартных устройств: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Answer 3

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

Итак, когда вы разрабатываете свой сайт, сжимайте свой браузер до упора (или так узки, как вы хотели бы поддержать), и сначала убедитесь, что он хорошо выглядит. Это называется «Mobile-first».

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

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

* Затем вы, вероятно, захотите посмотреть на свой сайт на нескольких определенных устройствах, которые, как вы знаете, люди используют для просмотра вашего сайта, и определить, нужно ли вам выполнять дополнительную работу с мультимедийными запросами (например, если абзац обертывает странно).

Что касается вашего конкретного синтаксиса запросов к мультимедиа, то the mozilla developer documentation всегда очень хорошее место для начала.

Удачи вам!