Media Queries: jak kierować na komputer, tablet i telefon komórkowy?
Przeprowadziłem kilka badań nad zapytaniami o media i nadal nie do końca rozumiem, jak kierować urządzenia o określonych rozmiarach.
Chcę być w stanie namierzyć komputer stacjonarny, tablet i telefon komórkowy. Wiem, że będą pewne rozbieżności, ale byłoby miło mieć ogólny system, który można wykorzystać do kierowania tych urządzeń.
Kilka przykładów, które znalazłem:
# Mobile
only screen and (min-width: 480px)
# Tablet
only screen and (min-width: 768px)
# Desktop
only screen and (min-width: 992px)
# Huge
only screen and (min-width: 1280px)
Lub:
# Phone
only screen and (max-width:320px)
# Tablet
only screen and (min-width:321px) and (max-width:768px)
# Desktop
only screen and (min-width:769px)
Jak myślisz, jakie powinny być te "punkty przerwania" dla każdego urządzenia?
13 answers
IMO są to najlepsze punkty przerwania:
@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
Edit : udoskonalony, aby lepiej pracować z siatkami 960:
@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
W praktyce wielu projektantów konwertuje piksele na ems, głównie B / C ems lepiej sobie pozwolić na powiększanie. Przy standardowym zoomie 1em === 16px
. Pomnóż piksele przez 1em/16px
, aby uzyskać ems. Na przykład 320px === 20em
.
W odpowiedzi na komentarz, {[5] } jest standardem w projektowaniu "mobile-first", w którym zaczynasz od projektowania dla najmniejszych ekranów, a następnie dodajesz coraz więcej zapytań o media, praca na coraz większych ekranach. Niezależnie od tego, czy wolisz min-
, max-
, lub ich kombinacji, należy pamiętać o kolejności reguł, pamiętając, że jeśli wiele reguł pasuje do tego samego elementu, późniejsze reguły zastąpią wcześniejsze reguły.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-28 05:22:08
Jeśli chcesz namierzyć urządzenie, po prostu napisz min-device-width
. Na przykład:
Dla iPhone
@media only screen and (min-device-width: 480px){}
Do tabletek
@media only screen and (min-device-width: 768px){}
Oto kilka dobrych artykułów:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-17 05:13:33
Nie celuj w określone urządzenia lub rozmiary!
Ogólna mądrość to nie celowanie w określone urządzenia lub rozmiary , ale ponowne sformułowanie terminu "punkt przerwania":
- rozwiń stronę dla mobile first używając procentów lub ems, nie pikseli, Następnie spróbuj w większym oknie i zauważ, gdzie zaczyna się to nie udać.]}
- przeprojektuj układ i dodaj Zapytanie o media CSS, aby obsłużyć uszkodzone części,
- powtórz proces, aż dotrzesz do następny punkt przerwania.
Możesz użyć responsivepx.com aby znaleźć "naturalne" punkty przerwania, jak w "punkty przerwania są martwe" marca Drummonda .
Użyj naturalnych punktów przerwania
"punkty przerwania" stają się faktycznym punktem , w którym projekt mobilny zaczyna się "łamać" , tzn. przestaje być użyteczny lub przyjemny wizualnie. Gdy już masz dobrze działającą witrynę mobilną, bez zapytań o media, możesz przestać martwić się o określone rozmiary i po prostu dodać zapytania o media, które obsługują sukcesywnie większe viewporty.
Jeśli nie próbujesz przypiąć projektu do dokładnego rozmiaru ekranu, takie podejście działa poprzez eliminując potrzebę kierowania konkretnych urządzeń . Integralność projektu w każdym punkcie przerwania zapewnia, że utrzyma się on w dowolnym rozmiarze. Innymi słowy, jeśli menu/sekcja treści/cokolwiek przestanie być użyteczne w określonym rozmiarze, Zaprojektuj punkt przerwania dla tego rozmiaru, Nie dla określonego urządzenia rozmiar.
[2]}Zobacz post Lyzy Gardner na behavioural breakpoints, a także post Zeldmana o Ethanie Marcotte i Jak responsive web design ewoluował z pomysłu intitial.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-30 11:38:28
Użyłem tej Strony , aby znaleźć rozdzielczość i rozwinął CSS na rzeczywiste liczby. Moje liczby różnią się nieco od powyższych odpowiedzi, z tym wyjątkiem, że mój css faktycznie trafia na pożądane urządzenia.
-
Również, mieć ten fragment kodu debugowania zaraz po zapytaniu o media: Na przykład:
@media only screen and (min-width: 769px) and (max-width: 1281px) { /* 10 inch tablet enter here */ body::before { content: "tablet to some desktop media query (769 > 1281) fired"; font-weight: bold; display: block; text-align: center; background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */ position: absolute; top: 0; left: 0; right: 0; z-index: 99; } }
Mam to w sieci, nie pamiętam dokładnie strony. Dodaj ten element debugowania do każdego zapytania o media, a zobaczysz, jakie zapytanie zostało zastosowane.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-18 18:09:38
Najlepsze punkty przerwania zalecane przez Twitter Bootstrap
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-04 08:01:23
Media queries for common device breakpoints
/* 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 */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* 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 (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-02 17:48:37
- Extra małe urządzenia (telefony, do 480px)
- małe urządzenia (Tablety, 768px i więcej)
- urządzenia Średnie (Duże tablety, laptopy i komputery stacjonarne, 992px i w górę)
- duże urządzenia (Duże komputery stacjonarne, 1200px i więcej)
- e-czytniki portretowe (Nook/Kindle), mniejsze Tablety - min-szerokość:481px
- Tablety portretowe, iPad portretowy, e-czytniki krajobrazowe-min-width: 641px
- tablet, iPad, laptopy lo-res-min-width: 961px
- HTC Jedno urządzenie-szerokość: 360px urządzenie-wysokość: 640px-webkit-urządzenie-Pixel-ratio: 3
- Samsung Galaxy S2 device-width: 320px device-height: 534px-webkit-device-pixel-ratio: 1.5 (min--moz-device-pixel-ratio: 1.5), (- o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5
- Urządzenie Samsung Galaxy S3-szerokość: 320px urządzenie-wysokość: 640px-webkit-urządzenie-pixel-ratio: 2 (min--moz-urządzenie-Pixel-ratio: 2), - starsze przeglądarki Firefox (przed Firefox 16) -
- Urządzenie Samsung Galaxy S4-szerokość: 320px urządzenie-wysokość: 640px-webkit-urządzenie-pixel-ratio: 3
- urządzenie LG Nexus 4-Szerokość: 384px urządzenie-wysokość: 592px-webkit-urządzenie-pixel-ratio: 2
- urządzenie Asus Nexus 7-szerokość: 601px urządzenie-wysokość: 906px w związku z tym, że nie jest to możliwe, nie jest to możliwe.]}
- iPad 1 i 2, ipad mini urządzenie-szerokość: 768px urządzenie-wysokość: 1024px-webkit-urządzenie-pixel-ratio: 1
- iPad 3 i 4-Szerokość urządzenia: 768px device-height: 1024px-webkit-device-pixel-ratio: 2)
- urządzenie iPhone 3G-szerokość: 320px urządzenie-wysokość: 480px-webkit-urządzenie-Pixel-ratio: 1)
- iPhone 4 urządzenie-szerokość: 320px urządzenie-wysokość: 480px-webkit-urządzenie-pixel-ratio: 2)
- iPhone 5 device-width: 320px device-height: 568px-webkit-device-pixel-ratio: 2)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-05 05:41:14
To nie kwestia liczby pikseli, to kwestia rzeczywistego rozmiaru (w mm lub calach) znaków na ekranie, który zależy od gęstości pikseli. Stąd "min-width:" i " max-width:" są bezużyteczne. Pełne wyjaśnienie tego problemu znajduje się tutaj: Czym dokładnie jest współczynnik pikseli urządzenia?
Zapytania"@media" biorą pod uwagę liczbę pikseli i współczynnik pikseli urządzenia, co skutkuje "wirtualną rozdzielczością", która jest tym, co musisz wziąć pod uwagę podczas projektowania strony: jeśli twoja czcionka ma stałą szerokość 10px, a "wirtualna Rozdzielczość pozioma" to 300 px, do wypełnienia wiersza potrzebne będzie 30 znaków.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:18:27
Ponieważ istnieje wiele różnych rozmiarów ekranu, które zawsze się zmieniają i najprawdopodobniej zawsze się zmienią, najlepszym sposobem jest oparcie punktów przerwania i mediaqueries na projekcie.
Najprostszym sposobem na to jest chwycenie gotowego projektu pulpitu i otwarcie go w przeglądarce internetowej. Zmniejsz ekran powoli, aby był węższy. Obserwuj, aby zobaczyć, kiedy projekt zaczyna się "łamać" lub wyglądać okropnie i ciasno. W tym momencie punkt przerwania z zapytaniem o media byłby wymagane.
Często tworzy się trzy zestawy zapytań multimedialnych dla komputera stacjonarnego, tabletu i telefonu. Ale jeśli twój projekt wygląda dobrze na wszystkich trzech, po co zawracać sobie głowę złożonością dodawania trzech różnych zapytań o media, które nie są konieczne. Zrób to w miarę potrzeb.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-01 01:58:08
Śledzenie mnie zadziałało. Zachowanie nie zmienia się na pulpicie. Ale na tabletach i urządzeniach mobilnych rozszerzam pasek nawigacyjny, aby pokryć duży obraz logo. Uwaga: używaj marginesu (górnego i dolnego) tyle, ile potrzebujesz do wysokości logo. W moim przypadku 60px góra i dół działały idealnie. Sprawdź pasek nawigacyjny Tutaj .
@media (max-width:768px) {
.navbar-toggle {
margin: 60px 0;
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-23 05:40:33
Obecnie najczęstszą rzeczą jest oglądanie urządzeń z ekranem retina, innymi słowy: urządzeń o wysokiej rozdzielczości i bardzo dużej gęstości pikseli(ale zwykle mniejszych niż 6 cali fizycznych). Dlatego będziesz potrzebować retina display specialized media-queries na swoim CSS. To jest najbardziej kompletny przykład, jaki mogłem znaleźć:
@media only screen and (min-width: 320px) {
/* Small screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min-resolution: 192dpi) and (min-width: 320px),
only screen and ( min-resolution: 2dppx) and (min-width: 320px) {
/* Small screen, retina, stuff to override above media query */
}
@media only screen and (min-width: 700px) {
/* Medium screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 700px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min-resolution: 192dpi) and (min-width: 700px),
only screen and ( min-resolution: 2dppx) and (min-width: 700px) {
/* Medium screen, retina, stuff to override above media query */
}
@media only screen and (min-width: 1300px) {
/* Large screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 1300px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min-resolution: 192dpi) and (min-width: 1300px),
only screen and ( min-resolution: 2dppx) and (min-width: 1300px) {
/* Large screen, retina, stuff to override above media query */
}
Source: CSS-Tricks Website
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-02 05:24:09
Extra small devices ~ Phones (< 768px)
Small devices ~ Tablets (>= 768px)
Medium devices ~ Desktops (>= 992px)
Large devices ~ Desktops (>= 1200px)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-11 19:06:53
@media (max-width: 767px) {
.container{width:100%} *{color:green;}-Mobile
}
@media (min-width: 768px) {
.container{width:100%} *{color:pink } -Desktop
}
@media (min-width: 768px) and (orientation:portrait) {
.container{width:100%} *{color:yellow } -Mobile
}
@media (min-width: 1024px) {
.container{width:100%} *{color:pink } -Desktop
}
@media (min-width: 1200px) {
.container{width:1180px} *{color:pink } -Desktop
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-14 12:03:52