Zalecane szerokości dla układów elastycznych

Question

Zalecane przez użytkownika szerokości powinny odpowiadać układowi elastycznego interfejsu użytkownika.

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

Answer 1

Nie ma zaleca szerokości dla układu reagującego. To całkowicie zależy od twojej struktury układu. Layout Structure oznacza użycie MEDIAQUERIES, gdy chcesz wprowadzić określone zmiany na określonej szerokości lub gdy twój układ przełamie określoną szerokość ekranu.

Answer 2

Jeśli szukasz najlepszych/typowych praktyk i konkretnych szerokości stosowanych podczas korzystania z elastycznych układów, proponuję, abyś przejrzał systemów sieciowych łatwo dostępnych. Szybkie wyszukiwanie w wyszukiwarce Google daje wiele wyników, ale jednym z moich ulubionych byłby the 1140 grid - Bardzo zgadzam się z ich logiką dotyczącą wyboru pomiarów. Verbatim:

Siatka 1140 idealnie pasuje do monitora 1280. Na mniejszych monitorach staje się płynny i dostosowuje się do szerokości przeglądarki. Złom 1024! Zaprojektuj jeden raz na 1140 na 1280, a przy niewielkiej dodatkowej pracy , dostosuje się do pracy na prawie każdym monitorze, nawet na komórce .

Jeśli nie jest to rodzaj odpowiedzi, której szukasz, proszę przeformułować pytanie.

Answer 3

zacząłem używając „320 i UP” szerokości "s, które przedstawiają się następująco:

Zauważ, że idą od małych do dużych nie na odwrót choć. Jest to bardziej zgodne z postępującej poprawy i zdecydowanie preferowane w każdym razie: 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) { 

} 

Jeśli używasz Sass, oto mały trick Używam:

$laptop-size: "only screen and (min-width: 768px)"; 
$desktop-size: "only screen and (min-width: 1382px)"; 
// etc 

A potem

@media #{$laptop-size} { 
    // Styling here... 
} 

W ten sposób można łatwo zmieniają szerokość w jednym miejscu i nie musisz za każdym razem pisać całej rzeczy.