Рекомендуемая ширина для гибких макетов

Что вы рекомендуете, должны быть ширины, которые я должен использовать для гибкого макета?

  /* 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) {}

Ответ 1

Для гибкого макета нет рекомендуемой. Это полностью зависит от структуры вашего макета. Layout Structure означает использование MEDIAQUERIES, если вы хотите, чтобы какие-либо конкретные изменения на определенной ширине или когда ваш макет нарушил определенную ширину экрана.

Ответ 2

Я начал использовать ширину "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...
}

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

Ответ 3

Если вы ищете лучшие/распространенные практики и особые ширины, применяемые при использовании адаптивных макетов, я бы предложил вам легко ознакомиться с сетчатыми системами. Быстрый поиск в Google дает много результатов, но одна из моих любимых будет сетка 1140 - я очень согласен с их логикой выбора измерения. Стенографический:

Сетка 1140 идеально вписывается в монитор 1280. На небольших мониторах он становится жидким и адаптируется к ширине браузера. Лом 1024! Дизайн один раз в 1140 на 1280, и с очень небольшим дополнительным работать, он будет адаптироваться для работы практически на любом мониторе, даже мобильный.

Если это не тот ответ, который вы искали, пожалуйста, перефразируйте вопрос.