Jakie są wartości w dobrej rozdzielczości do użycia z zapytaniami o media?

Question

Ostatnio bawiłem się przy pomocy zapytań o media CSS, ponieważ jest to świetny sposób na dostosowanie mojej strony do różnych rozmiarów ekranu. Planuję wprowadzić je do wersji na żywo.

Moje pytanie brzmi: Czy są jakieś zalecane wartości rozdzielczości, przy których układ się zmienia?

Answer 1

Zobacz ten artykuł do szablonu „320 i Up” - przez Andy Clarke, jest używany przez wielu programistów i projektantów: http://www.stuffandnonsense.co.uk/blog/about/this_is_the_new_320_and_up

Jeśli przewinąć do mediów odpytuje sekcja zobaczysz używają pięć CSS3 media Kwerendy kwerend (480, 600, 768, 992 i 1382px). Zazwyczaj trzymam się tylko 4 (480, 600, 768, 1024).

Aby wyjaśnić zakresach:

min-width: 480px: będzie skierowany urządzeń mobilnych w trybie poziomym i UP

min-width: 600px: Cele tabletek w trybie pionowym i UP

min-width: 768px: Cele tabletek w trybie poziomym i UP

: Kieruje na widok pulpitu

Zwykle na samym początku będę mieć widok mobilny CSS (stąd określenie "320 i więcej").

Answer 2

Chciałbym tylko dodać do odpowiedzi Suvi.

Adaptive Design stosuje zapytania o media do ukierunkowanych rozdzielczości, jednak dzięki Responsive Design możesz dodawać punkty przerwania tam, gdzie uważasz to za konieczne.

Nie istnieje żadna reguła dotycząca liczby punktów przerwania, jaką powinna mieć strona, ale należy ją dodać w miejscu, w którym nastąpi podział układu. Celem jest upewnienie się, że projekt i treść płyną ładnie, niezależnie od szerokości rzutni.

Myślę ten post zapewnia dobry przegląd:

http://www.williamwalker.me/blog/an-introduction-to-responsive-design.html

Answer 3

próbować ten jeden z wyświetlaczem siatkówki

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

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

/* iPads (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
/* Styles */ 
} 

/* iPads (landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
/* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
/* Styles */ 
} 

/* Desktops and laptops ----------- */ 
@media only screen 
and (min-width : 1224px) { 
/* Styles */ 
} 

/* Large screens ----------- */ 
@media only screen 
and (min-width : 1824px) { 
/* Styles */ 
} 

/* iPhone 4 ----------- */ 
@media 
only screen and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5) { 
/* Styles */ 
} 

Hope you are fine

Answer 4

Napisałem ten mniej rozwiązanie:

/* screens range */ 

@screen-s-max: 20em;   /* 320px */ 
@screen-min:  20.063em;  /* 321px */ 
@screen-max:  40em;   /* 640px */ 
@screen-m-min: 40.063em;  /* 641px */ 
@screen-m-max: 64em;   /* 1024px */ 
@screen-l-min: 64.063em;  /* 1025px */ 
@screen-l-max: 90em;   /* 1440px */ 
@screen-xl-min: 90.063em;  /* 1441px */ 
@screen-xl-max: 120em;  /* 1920px */ 
@screen-xxl-min: 120.063em; /* 1921px */ 

/* 
0----- smallmobile -----320----- mobile -----640----- tablet -----1024----- notebook -----1440----- desktop -----1920----- wide 
*/ 

@onlyScreen: ~"only screen"; 

@smallmobile: ~"(max-width: @{screen-s-max})"; 
@mobile: ~"(min-width: @{screen-s-max}) and (max-width: @{screen-max})"; 
@tablet: ~"(min-width: @{screen-m-min}) and (max-width: @{screen-m-max})"; 
@notebook: ~"(min-width: @{screen-l-min}) and (max-width: @{screen-l-max})"; 
@desktop: ~"(min-width: @{screen-xl-min}) and (max-width: @{screen-xl-max})"; 
@wide: ~"(min-width: @{screen-xxl-min})"; 

@portrait: ~"(orientation:portrait)"; 
@landscape: ~"(orientation:landscape)"; 

@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)", 
~"only screen and (min--moz-device-pixel-ratio: 1.5)", 
~"only screen and (-o-min-device-pixel-ratio: 3/2)", 
~"only screen and (min-device-pixel-ratio: 1.5)"; 


@mobile-and-more: ~"(min-width: @{screen-min})"; 
@tablet-and-more: ~"(min-width: @{screen-m-min})"; 
@notebook-and-more: ~"(min-width: @{screen-l-min})"; 
@desktop-and-more: ~"(min-width: @{screen-xl-min})"; 

/* 

syntax example 

@media @onlyScreen and @tablet and @portrait , @notebook and @landscape, @mobile and @landscape{ 
    body{ 
    opacity: 0.8; 
    } 
} 

*/ 

Jak pokazano w przykładzie składni można połączyć wszystkie te mniej zmiennych i uzyskać złożone zapytanie o media. Użyj operatora "AND" dla operatora logicznego AND i przecinka dla operatora OR. Możesz łączyć różne rozdzielczości ekranu, orientację urządzenia (krajobraz/portret) i siatkówkę, a nie urządzenia.

Kod ten można także łatwo konfigurować, ponieważ umożliwia edytowanie/dodawanie/usuwanie wartości zakresu ekranów w celu zarządzania różnymi rozdzielczościami ekranu.