Какова стандартная ширина для смартфонов и планшетов при кодировании адаптивного дизайна. Я просмотрел разные сайты, но я, похоже, не нашел хороших шаблонов для стандартной ширины. Что вы, ребята, обычно делаете для breakpoint/mediaqueries при написании кода?
Если у кого-то есть хороший шаблон для разных речей для планшета/смартфона и т.д., пожалуйста, поделитесь ими! Спасибо!
Существует два способа думать о ваших запросах на CSS-материал.
Сначала нужно перейти к "Desktop First". Это означает, что ваш базовый CSS будет нацелен на большие экраны, а затем ваш медиа-запрос перезапишет ваши классы, чтобы адаптироваться к меньшим классам. Ваш CSS может выглядеть следующим образом:
/* Large screens ----------- */
/*some CSS*/
/* Desktops and laptops ----------- */
@media only screen and (max-width : 1824px) {...}
/* iPads (landscape) ----------- */
@media only screen and (max-width : 1224px) {...}
/* iPads (portrait) ----------- */
@media only screen and (max-width : 1024px) {...}
/* Smartphones (landscape) ----------- */
@media only screen and (max-width : 768px) {...}
/* Big smartphones (portrait) (ie: Galaxy 3 has 360)*/
@media only screen and (max-width : 640px) {...}
/* Smartphones (portrait) (ie: Galaxy 1) */
@media only screen and (max-width : 321px) {...}
Второй подход - перейти к "Первому мобильному". Это означает, что ваш базовый CSS будет нацелен на небольшие экраны, такие как IPhone 4. Затем ваш медиа-запрос перезапишет ваши классы, чтобы адаптироваться к большим экранам. Здесь и пример:
/* Smartphones (portrait) ----------- */
/* Ipad2 (portrait) ----------- */
@media only screen and (min-width : 768px){...}
/* Ipad2 (paysage) ----------- */
@media only screen and (min-width : 1024px){...}
/* Ordi (Petit) ----------- */
@media only screen and (min-width : 1224px){...}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1824px){...}
Если вы действительно хотите вдаваться в подробности и воспользоваться дисплеем сетчатки, вам придется играть с соотношением пикселей. Взгляните на эту таблицу стилей CSS: media-queries-boilerplate.css. Одна из приятных вещей, связанных с отображением сетчатки, - предоставить клиенту более качественные изображения. Недостатком этого является то, что он требует большей пропускной способности и делает сайт медленнее.
Надеюсь, это поможет вам.
Я всегда использую проценты при кодировании чувствительных элементов дизайна - избегайте использования контрольных точек, управляемых устройством, как сказал Skube в своем комментарии к вашему вопросу.