Что вы рекомендуете, должны быть ширины, которые я должен использовать для гибкого макета?
/* Default Width: */
.container { width: 940px; margin: 0 auto; }
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}
Для гибкого макета нет рекомендуемой. Это полностью зависит от структуры вашего макета. Layout Structure означает использование MEDIAQUERIES, если вы хотите, чтобы какие-либо конкретные изменения на определенной ширине или когда ваш макет нарушил определенную ширину экрана.
Я начал использовать ширину "320 и вверх", которые выглядят следующим образом:
Обратите внимание, что они идут от малого к большому, но не наоборот. Это в большей степени соответствует прогрессивному усовершенствованию и определенно предпочтет в любом случае: http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
http://stuffandnonsense.co.uk/projects/320andup/
// Default styling here
// Little larger screen
@media only screen and (min-width: 480px) {
}
// Pads and larger phones
@media only screen and (min-width: 600px) {
}
// Larger pads
@media only screen and (min-width: 768px) {
}
// Horizontal pads and laptops
@media only screen and (min-width: 992px) {
}
// Really large screens
@media only screen and (min-width: 1382px) {
}
// 2X size (iPhone 4 etc)
@media only screen and
(-webkit-min-device-pixel-ratio: 1.5), only screen and
(-o-min-device-pixel-ratio: 3/2), only screen and
(min-device-pixel-ratio: 1.5) {
}
Если вы используете Sass, вот небольшой трюк, который я использовал:
$laptop-size: "only screen and (min-width: 768px)";
$desktop-size: "only screen and (min-width: 1382px)";
// etc
И затем
@media #{$laptop-size} {
// Styling here...
}
Таким образом, вы можете легко менять ширину в одном месте, и вам не нужно писать все это каждый раз.
Если вы ищете лучшие/распространенные практики и особые ширины, применяемые при использовании адаптивных макетов, я бы предложил вам легко ознакомиться с сетчатыми системами. Быстрый поиск в Google дает много результатов, но одна из моих любимых будет сетка 1140 - я очень согласен с их логикой выбора измерения. Стенографический:
Сетка 1140 идеально вписывается в монитор 1280. На небольших мониторах он становится жидким и адаптируется к ширине браузера. Лом 1024! Дизайн один раз в 1140 на 1280, и с очень небольшим дополнительным работать, он будет адаптироваться для работы практически на любом мониторе, даже мобильный.
Если это не тот ответ, который вы искали, пожалуйста, перефразируйте вопрос.