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 autoUkł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!