Adresář článků
Jak mobilní responzivní CSS zobrazuje různá rozvržení responzivní rozvržení @media obrazovky podle různých rozlišení?
Následující článek představí, jak používat CSS k určení různých rozlišení a zobrazení různých šířkových rozložení pro dosažení adaptivní šířky.
Přátelé v nouzi se na to mohou obrátit, doufám, že to bude užitečné pro všechny.
Rozdíl mezi webovými stránkami pro sítotisk @media a @media
- Pokud je třeba použít css v tiskovém zařízení, použijte @media, jinak použijte @media screen.
- To však nemusí být nutně pravda. Ve skutečnosti, pokud nahradíte „screen“ za „print“ a napíšete to jako @media print, pak lze CSS použít na tiskovém zařízení;
- Pamatujte však, že css deklarovaný @media print je platný pouze na tiskových zařízeních.
1. Popis malého pouzdra DIVCSS
Nejprve jsme nastavili CSS boxu DIV s názvem „.abc“, nastavili jeho výšku na 300px a nastavili okraj CSS na černou;
- a nastavení
margin:0 autoRozvržení je vystředěno a tyto dva styly jsou přednastaveny pro snadné prohlížení.
Ručně přetáhneme prohlížeč, abychom zobrazili šířku, a pak sledujeme, jak se mění šířka pole:
- Když je šířka prohlížeče upravena na šířku nepřesahující 500 pixelů, zobrazí se 100 pixelů odpovídající šířce pole;
- Když je šířka prohlížeče upravena na méně než 901 pixelů, zobrazí se „.abc“ odpovídající šířce pole, které zobrazuje 200 pixelů;
- Když je šířka prohlížeče upravena tak, aby byla větší než 1201px, šířka objektu boxu zobrazí 1200px;
- Když je menší než 1200px, šířka zobrazení je 900px.
2, CSS mobilní telefon adaptivní kód mobilního terminálu
.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宽度 */- Je třeba poznamenat, že pořadí kódu CSS sází CSS od velkého po malé (soudím, že čím větší šířka prohlížeče, tím vyšší přední strana).
- Je to kvůli logickému vztahu, úsudek @media o ladění CSS způsobí, že úsudek selže.
3. HTML kód
<!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>Poznámka: poměr stran zařízení
- device-aspect-ratio lze použít k přizpůsobení zařízení se specifickými poměry stran obrazovky, což je také užitečná vlastnost.
- Naše stránka chce například definovat styl pro normální obrazovky s poměrem stran 4:3.
- Poté pro širokoúhlý formát 16:9 a 16:10 definujte jiný styl, jako je adaptivní šířka a pevná šířka:
- @media only obrazovka a (poměr stran zařízení: 4/3)
4. Kompatibilní s hlavními prohlížeči HTML+CSS+JS zdrojový kód
<!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>Výše uvedené je adaptivní CSS pro mobilní terminál, které zobrazuje různý podrobný obsah reagující na @media obrazovku podle různých obrazovek.
Blog Hope Chen Weiliang ( https://www.chenweiliang.com/ ) sdílel „Mobile Adaptive CSS Different Screens Display Different @media Screen Responsive“, což je pro vás užitečné.
Vítejte u sdílení odkazu na tento článek:https://www.chenweiliang.com/cwl-2074.html
Vítejte na telegramovém kanálu blogu Chen Weiliang, kde získáte nejnovější aktualizace!
📚 Tento průvodce má obrovskou hodnotu, 🌟Toto je vzácná příležitost, nenechte si ji ujít! ⏰⌛💨
Sdílejte a lajkujte, pokud se vám líbí!
Vaše sdílení a lajky jsou naší neustálou motivací!