Katalog artykułów
W jaki sposób responsywny CSS na urządzenia mobilne wyświetla różne responsywne układy ekranu @media w różnych rozdzielczościach?
Poniższy artykuł przedstawi, jak używać CSS do określania różnych rozdzielczości i wyświetlania różnych układów szerokości w celu uzyskania adaptacyjnej szerokości.
Przyjaciele w potrzebie mogą się do niego odnieść, mam nadzieję, że każdemu się przyda.
Różnica między stronami do sitodruku @media i @media
- Jeśli css ma być używany w urządzeniu drukującym, użyj @media, w przeciwnym razie użyj @media screen.
- Jednak niekoniecznie jest to prawdą.W rzeczywistości, jeśli zastąpisz „screen” słowem „print” i zapiszesz to jako @media print, wtedy CSS może być używany na urządzeniu drukującym;
- Pamiętaj jednak, że css zadeklarowany przez @media print jest ważny tylko na urządzeniach drukujących.
1. Opis małego przypadku DIVCSS
Najpierw ustawiliśmy CSS pola DIV o nazwie ".abc", ustawiliśmy jego wysokość na 300px i ustawiliśmy obramowanie CSS na czarną;
- i ustawienia
margin:0 auto
Układ jest wyśrodkowany, a te dwa style są wstępnie ustawione w celu łatwego przeglądania.
Ręcznie przeciągamy przeglądarkę, aby wyświetlić szerokość, a następnie obserwujemy, jak zmienia się szerokość pola:
- Gdy szerokość przeglądarki jest dostosowana do szerokości nie większej niż 500px, wyświetlane jest 100px odpowiadające szerokości pudełka;
- Gdy szerokość przeglądarki jest ustawiona na mniej niż 901px, ".abc" jest wyświetlany zgodnie z szerokością pola, które wyświetla 200px;
- Gdy szerokość przeglądarki jest dostosowana do większej niż 1201px, szerokość obiektu pudełkowego wyświetla 1200px;
- Gdy jest mniejszy niż 1200px, szerokość wyświetlacza wynosi 900px.
2, kod adaptacyjny terminala mobilnego CSS telefonu komórkowego
.abc{ height:300px; border:1px solid #000; margin:0 auto} @media screen and (min-width: 1201px) { .abc {width: 1200px} } /* css注释:设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */ @media screen and (max-width: 1200px) { .abc {width: 900px} } /* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */ @media screen and (max-width: 901px) { .abc {width: 200px;} } /* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */ @media screen and (max-width: 500px) { .abc {width: 100px;} } /* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
- Należy zauważyć, że kolejność kodu CSS to skład CSS od dużego do małego (sądząc, że im większa szerokość przeglądarki, tym wyższy front).
- Dzieje się tak z powodu logicznego związku, ocena @media dotycząca debugowania CSS spowoduje, że ocena się nie powiedzie.
3. Kod HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>无标题文档</title> <style> .abc{ height:300px; border:1px solid #000; margin:0 auto} @media screen and (min-width: 1201px) { .abc {width: 1200px} } /* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */ @media screen and (max-width: 1200px) { .abc {width: 900px} } /* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */ @media screen and (max-width: 900px) { .abc {width: 200px;} } /* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */ @media screen and (max-width: 500px) { .abc {width: 100px;} } /* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */ </style> </head> <body> <div class="abc">DIVCSS5实例:我这个DIV宽度会随浏览器宽度变化哦,试试改变浏览器宽度</div> </body> </html>
Uwaga: współczynnik proporcji urządzenia
- device-aspect-ratio może być używany do dopasowania urządzeń o określonych proporcjach ekranu, co również jest przydatną właściwością.
- Na przykład nasza strona chce zdefiniować styl dla normalnych ekranów o proporcjach 4:3.
- Następnie dla ekranu panoramicznego 16:9 i 16:10 zdefiniuj inny styl, taki jak szerokość adaptacyjna i szerokość stała:
- @media only screen i (współczynnik proporcji urządzenia: 4/3)
4. Kompatybilny z głównymi przeglądarkami kod źródłowy HTML+CSS+JS
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>无标题文档</title> <style> .abc{ height:300px; border:1px solid #000; margin:0 auto} @media screen and (min-width: 1201px) { .abc {width: 1200px} } @media screen and (max-width: 1200px) { .abc {width: 900px} } @media screen and (max-width: 900px) { .abc {width: 200px;} } @media screen and (max-width: 500px) { .abc {width: 100px;} } </style> <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> </head> <body> <div class="abc">DIV宽度会随浏览器宽度变化哦,改变浏览器宽度</div> </body> </html>
Powyższe jest adaptacyjnym CSS terminala mobilnego, który wyświetla różne szczegółowe treści @media screen w zależności od różnych ekranów.
Nadzieja Chen Weiliang Blog ( https://www.chenweiliang.com/ ) Udostępnione „Mobile Adaptive CSS Różne ekrany wyświetlają różne reakcje @media Screen”, co jest dla Ciebie pomocne.
Zapraszamy do udostępnienia linku do tego artykułu:https://www.chenweiliang.com/cwl-2074.html
Witamy na kanale Telegram bloga Chen Weiliang, aby uzyskać najnowsze aktualizacje!
📚 Ten przewodnik zawiera ogromną wartość, 🌟To rzadka okazja, nie przegap jej! ⏰⌛💨
Udostępnij i polub, jeśli chcesz!
Twoje udostępnianie i polubienia to nasza ciągła motywacja!