Artikel Directory
Hoe toant mobile responsive CSS ferskillende @media-skerm responsive layouts neffens ferskate resolúsjes?
It folgjende artikel sil yntrodusearje hoe't jo CSS brûke om ferskate resolúsjes te bepalen en ferskate breedte-yndielingen werjaan om adaptive breedte te berikken.
Freonen yn need kinne ferwize nei it, ik hoopje dat it sil wêze nuttich foar elkenien.
It ferskil tusken @media en @media skermprintsjen fan websiden
- As de css brûkt wurde moat yn in printapparaat, brûk @media, oars, brûk @media-skerm.
- Dit is lykwols net needsaaklik wier. Yn feite, as jo "skerm" ferfange troch "print" en skriuwe as @media print, dan kin de CSS brûkt wurde op it printapparaat;
- Mar tink derom dat de css ferklearre troch @media print allinich jildich is op printapparaten.
1. DIVCSS lytse saak beskriuwing
Wy sette earst in DIV box CSS neamd ".abc", set syn hichte oan 300px, en set de CSS grins oan swart;
- en ynstellings
margin:0 autoDe yndieling is sintraal, en dizze twa stilen binne foarôf ynsteld foar maklik besjen.
Wy slepe de browser mei de hân om de breedte wer te jaan, en observearje dan hoe't de breedte fan it fak feroaret:
- As de breedte fan 'e browser wurdt oanpast oan in breedte fan net mear as 500px, wurdt 100px werjûn oerienkommende mei de breedte fan it fak;
- Wannear't de breedte fan de blêder wurdt oanpast te wêzen minder as 901px, ".abc" wurdt werjûn oerienkommende mei de breedte fan it fak, dat toant 200px;
- As de blêderbreedte wurdt oanpast om grutter te wêzen as 1201px, toant de breedte fan it fak foarwerp 1200px;
- As it minder is dan 1200px, is de displaybreedte 900px.
2, CSS mobile telefoan mobile terminal adaptive koade
.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宽度 */- Dêrby moat opmurken wurde dat de CSS-koade folchoarder is typesetting CSS fan grut nei lyts (beoardielje dat de grutter de blêder breedte, hoe heger de foarkant).
- Dit is fanwege de logyske relaasje, it oardiel fan @media oer CSS-debuggen sil it oardiel mislearje.
3. HTML koade
<!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>Opmerking: apparaat-aspektferhâlding
- device-aspect-ratio kin brûkt wurde om apparaten te passen mei spesifike skerm-aspektferhâldingen, wat ek in nuttich eigendom is.
- Bygelyks, ús side wol in styl definiearje foar normale skermen mei in aspektferhâlding fan 4:3.
- Dan definiearje foar 16:9 en 16:10 widescreen in oare styl, lykas adaptive breedte en fêste breedte:
- @media allinne skerm en (apparaat-aspect-ferhâlding: 4/3)
4. Kompatibel mei grutte browsers HTML + CSS + JS boarne koade
<!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>It boppesteande is de mobile terminal adaptive CSS, dy't ferskate @media skerm responsive detaillearre ynhâld toant neffens ferskate skermen.
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) Dielde "Mobile Adaptive CSS Different Screens Display Different @media Screen Responsiveness", dat is nuttich foar jo.
Wolkom om de keppeling fan dit artikel te dielen:https://www.chenweiliang.com/cwl-2074.html
Wolkom by it Telegram-kanaal fan Chen Weiliang's blog om de lêste updates te krijen!
📚 Dizze hantlieding befettet enoarme wearde, 🌟Dit is in seldsume kâns, mis it net! ⏰⌛💨
Diel en like as jo wolle!
Jo dielen en likes binne ús trochgeande motivaasje!