Директорияи мақолаҳо
Чӣ тавр CSS-и ҷавобгӯи мобилӣ тарҳҳои гуногуни @media screen-ро мувофиқи қарорҳои гуногун намоиш медиҳад?
Мақолаи зерин чӣ гуна истифода бурдани CSS-ро барои муайян кардани қарорҳои гуногун ва намоиши тарҳҳои паҳнои гуногун барои ноил шудан ба паҳнои мутобиқшавӣ муаррифӣ мекунад.
Дӯстони ниёзманд метавонанд ба он муроҷиат кунанд, ман умедворам, ки ин барои ҳама муфид хоҳад буд.
Фарқи байни саҳифаҳои чопи экрани @media ва @media
- Агар css дар дастгоҳи чопӣ истифода шавад, @media -ро истифода баред, вагарна экрани @media -ро истифода баред.
- Аммо, ин ҳатман дуруст нест.Дар асл, агар шумо "экран"-ро бо "print" иваз кунед ва онро ҳамчун @media print нависед, он гоҳ CSS-ро дар дастгоҳи чопкунӣ истифода бурдан мумкин аст;
- Аммо дар хотир доред, ки css эълонкардаи @media print танҳо дар дастгоҳҳои чопӣ эътибор дорад.
1. Тавсифи парвандаи хурди DIVCSS
Мо аввал қуттии DIV CSS-ро бо номи ".abc" насб кардем, баландии онро ба 300px ва сарҳади CSS-ро ба сиёҳ муқаррар кардем;
- ва танзимот
margin:0 autoТарҳ марказонида шудааст ва ин ду услуб барои дидани осон пешакӣ муқаррар карда шудаанд.
Мо браузерро дастӣ кашола мекунем, то паҳниро нишон диҳем ва сипас мушоҳида мекунем, ки паҳнои қуттӣ чӣ гуна тағир меёбад:
- Вақте ки паҳнои браузер ба паҳнои на бештар аз 500px танзим карда мешавад, 100px мувофиқ ба паҳнои қуттӣ намоиш дода мешавад;
- Вақте ки паҳнои браузер ба камтар аз 901px тасҳеҳ карда мешавад, ".abc" мувофиқ ба паҳнои қуттӣ, ки 200px нишон медиҳад, намоиш дода мешавад;
- Вақте ки паҳнои браузер ба калонтар аз 1201px танзим карда мешавад, паҳнои объекти қуттӣ 1200px нишон медиҳад;
- Вақте ки он аз 1200 пиксел камтар аст, паҳнои намоиш 900 пиксел аст.
2, CSS телефони мобилии терминали мобилии рамзи мутобиқшавӣ
.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宽度 */- Бояд қайд кард, ки тартиби рамзи CSS чопкунии CSS-ро аз калон ба хурд мекунад (бо назардошти он, ки паҳнои браузер ҳар қадар калонтар бошад, пеши он баландтар аст).
- Ин аз сабаби муносибати мантиқӣ, доварии @media дар бораи ислоҳи CSS боиси нокомии ҳукм мегардад.
3. Рамзи 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>Эзоҳ: таносуби дастгоҳ
- таносуби дастгоҳ метавонад барои мувофиқ кардани дастгоҳҳо бо таносуби мушаххаси экран истифода шавад, ки ин ҳам як амволи муфид аст.
- Масалан, саҳифаи мо мехоҳад услуберо барои экранҳои муқаррарӣ бо таносуби 4:3 муайян кунад.
- Сипас барои 16:9 ва 16:10 васеъэкран, сабки дигарро муайян кунед, ба монанди паҳнои мутобиқшавӣ ва паҳнои собит:
- Танҳо экрани @media ва (таносуби дастгоҳ: 4/3)
4. Бо браузерҳои асосии 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>Дар боло як терминали мобилии мутобиқшавандаи CSS мебошад, ки мундариҷаи муфассали экрани @media-ро мувофиқи экранҳои гуногун намоиш медиҳад.
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) Мубодилаи "Экранҳои Мутобиқсозии мобилӣ CSS-и гуногун Ҷавоби экрани @media-ро нишон медиҳанд", ки барои шумо муфид аст.
Хуш омадед ба мубодилаи истиноди ин мақола:https://www.chenweiliang.com/cwl-2074.html
Хуш омадед ба канали Telegram блоги Чен Вейлян барои гирифтани навсозиҳои охирин!
📚 Ин дастур дорои арзиши бузург аст, 🌟Ин як имконияти нодир аст, онро аз даст надиҳед! ⏰⌛💨
Агар ба шумо маъқул бошад, мубодила кунед ва лайк монед!
Мубодилаи шумо ва лайкҳои шумо ангезаи доимии мост!