Maqolalar katalogi
Mobil javob beruvchi CSS qanday qilib turli ruxsatlarga ko'ra turli @media ekranning sezgir tartiblarini aks ettiradi?
Quyidagi maqolada CSS-dan turli o'lchamlarni aniqlash va moslashuvchan kenglikka erishish uchun turli xil kenglik sxemalarini ko'rsatish uchun qanday foydalanish haqida ma'lumot beriladi.
Muhtoj do'stlar murojaat qilishlari mumkin, umid qilamanki, bu hamma uchun foydali bo'ladi.
@media va @media ekranli veb-sahifalarni chop etish o'rtasidagi farq
- Agar CSS-ni chop etish qurilmasida ishlatish kerak bo'lsa, @media dan foydalaning, aks holda @media ekranidan foydalaning.
- Biroq, bu mutlaqo to'g'ri emas.Aslida, agar siz "ekran" ni "print" bilan almashtirsangiz va uni @media print deb yozsangiz, u holda CSS-dan chop etish qurilmasida foydalanish mumkin;
- Ammo shuni yodda tutingki, @media print tomonidan e'lon qilingan CSS faqat chop etish qurilmalarida amal qiladi.
1. DIVCSS kichik ish tavsifi
Biz birinchi navbatda ".abc" nomli CSS DIV qutisini o'rnatdik, uning balandligini 300 pikselga o'rnatdik va CSS chegarasini qora rangga o'rnatdik;
- va sozlamalar
margin:0 autoTartib markazlashtirilgan va bu ikki uslub oson ko'rish uchun oldindan o'rnatilgan.
Kenglikni ko'rsatish uchun brauzerni qo'lda sudrab boramiz va keyin qutining kengligi qanday o'zgarishini kuzatamiz:
- Brauzerning kengligi 500px dan oshmaydigan kenglikka moslashtirilganda, qutining kengligiga mos keladigan 100px ko'rsatiladi;
- Brauzerning kengligi 901px dan kamroq qilib sozlanganda, 200px ko'rsatadigan qutining kengligiga mos keladigan ".abc" ko'rsatiladi;
- Brauzer kengligi 1201 pikseldan kattaroq qilib sozlanganda, quti ob'ektining kengligi 1200 pikselni ko'rsatadi;
- 1200px dan kam bo'lsa, displey kengligi 900px bo'ladi.
2, CSS mobil telefon mobil terminali moslashuv kodi
.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宽度 */- Shuni ta'kidlash kerakki, CSS kod tartibi CSS-ni kattadan kichikgacha terishdan iborat (brauzer kengligi qanchalik katta bo'lsa, old tomoni shunchalik yuqori bo'ladi).
- Buning sababi, mantiqiy munosabatlar tufayli, @medianing CSS disk raskadrovka haqidagi mulohazasi bu qarorning barbod bo'lishiga olib keladi.
3. HTML kodi
<!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>Eslatma: qurilma nisbati
- qurilma-aspekt nisbati ma'lum ekran nisbatlariga ega qurilmalarni moslashtirish uchun ishlatilishi mumkin, bu ham foydali xususiyatdir.
- Misol uchun, bizning sahifamiz 4:3 nisbatdagi oddiy ekranlar uchun uslubni aniqlamoqchi.
- Keyin 16:9 va 16:10 keng ekran uchun moslashtirilgan kenglik va belgilangan kenglik kabi boshqa uslubni belgilang:
- @media faqat ekran va (qurilma nisbati: 4/3)
4. Asosiy brauzerlar HTML+CSS+JS manba kodi bilan mos keladi
<!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>Yuqoridagi mobil telefon moslashtirilgan CSS bo'lib, u turli ekranlarga ko'ra turli @media ekran sezgir batafsil kontentni ko'rsatadi.
Umid qilamanki, Chen Veyliang blogi ( https://www.chenweiliang.com/ ) Umumiy "Mobil adaptiv CSS turli ekranlar turli @media ekran sezgirligini ko'rsatadi", bu siz uchun foydalidir.
Ushbu maqolaning havolasini baham ko'rish uchun xush kelibsiz:https://www.chenweiliang.com/cwl-2074.html
Eng so'nggi yangiliklardan xabardor bo'lish uchun Chen Veyliang blogining Telegram kanaliga xush kelibsiz!
📚 Ushbu qo'llanmada katta ahamiyatga ega, 🌟Bu kamdan-kam imkoniyat, uni qo'ldan boy bermang! ⏰⌛💨
Baham ko'ring va yoqsa like!
Sizning baham ko'rish va yoqtirishlaringiz bizning doimiy motivatsiyamizdir!