Məqalələr kataloqu
Mobil cavab verən CSS müxtəlif qətnamələrə uyğun olaraq müxtəlif @media ekranına cavab verən tərtibatları necə göstərir?
Aşağıdakı məqalə müxtəlif qətnamələri müəyyən etmək və adaptiv genişliyə nail olmaq üçün müxtəlif genişlik planlarını göstərmək üçün CSS-dən necə istifadə edəcəyinizi təqdim edəcək.
Ehtiyacı olan dostlar müraciət edə bilər, ümid edirəm hər kəsə faydalı olar.
@media və @media ekran çapı veb səhifələri arasındakı fərq
- Əgər css çap cihazında istifadə edilməlidirsə, @media istifadə edin, əks halda @media ekranından istifadə edin.
- Lakin bu, mütləq doğru deyil.Əslində, əgər siz “ekran”ı “print” ilə əvəz etsəniz və @media print kimi yazsanız, o zaman CSS çap qurğusunda istifadə oluna bilər;
- Amma diqqətli olun, @media print tərəfindən elan edilən css yalnız çap cihazlarında keçərlidir.
1. DIVCSS kiçik iş təsviri
Əvvəlcə ".abc" adlı bir DIV qutusu CSS təyin etdik, onun hündürlüyünü 300px olaraq təyin etdik və CSS sərhədini qara rəngə təyin etdik;
- və parametrlər
margin:0 autoDizayn mərkəzləşmişdir və bu iki üslub asan baxmaq üçün əvvəlcədən təyin edilmişdir.
Genişliyi göstərmək üçün brauzeri əl ilə sürükləyirik və sonra qutunun eninin necə dəyişdiyini müşahidə edirik:
- Brauzerin eni 500px-dən çox olmayan genişliyə uyğunlaşdırıldıqda, qutunun eninə uyğun olaraq 100px göstərilir;
- Brauzerin eni 901px-dən az olaraq tənzimləndikdə, 200px göstərən qutunun eninə uyğun olaraq ".abc" göstərilir;
- Brauzerin eni 1201px-dən böyük olaraq tənzimləndikdə, qutu obyektinin eni 1200px olaraq göstərilir;
- 1200px-dən az olduqda, ekran eni 900px olur.
2, CSS mobil telefon mobil terminal adaptiv kodu
.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宽度 */- Qeyd etmək lazımdır ki, CSS kod sırası CSS-ni böyükdən kiçiyə çap edir (browser eni nə qədər böyükdürsə, ön tərəf də bir o qədər yüksəkdir).
- Bunun səbəbi məntiqi əlaqəyə görə @media-nın CSS-in sazlanması ilə bağlı mülahizəsinin uğursuzluğuna səbəb olacaq.
3. HTML kodu
<!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>Qeyd: cihaz-aspekt nisbəti
- cihaz-aspekt nisbəti, xüsusi ekran aspekt nisbətləri olan cihazları uyğunlaşdırmaq üçün istifadə edilə bilər ki, bu da faydalı xüsusiyyətdir.
- Məsələn, səhifəmiz 4:3 nisbətində normal ekranlar üçün üslub müəyyən etmək istəyir.
- Sonra 16:9 və 16:10 geniş ekran üçün adaptiv en və sabit en kimi başqa bir üslub təyin edin:
- @media yalnız ekran və (cihaz-aspekt nisbəti:4/3)
4. Əsas brauzerlər HTML+CSS+JS mənbə kodu ilə uyğun gəlir
<!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>Yuxarıdakı cib telefonu adaptiv CSS-dir, hansı ki, müxtəlif ekranlara uyğun olaraq müxtəlif @media ekranına cavab verən ətraflı məzmunu göstərir.
Hope Chen Weiliang Blogu ( https://www.chenweiliang.com/ ) Paylaşılan "Mobil Adaptiv CSS Fərqli Ekranlar Fərqli @media Ekran Cavablığını göstərir" bu sizin üçün faydalıdır.
Bu məqalənin linkini paylaşmağa xoş gəlmisiniz:https://www.chenweiliang.com/cwl-2074.html
Ən son yenilikləri əldə etmək üçün Chen Weiliang bloqunun Telegram kanalına xoş gəlmisiniz!
📚 Bu təlimatda böyük dəyər var, 🌟Bu nadir fürsətdir, qaçırmayın! ⏰⌛💨
Bəyəndinizsə paylaşın və bəyənin!
Paylaşımlarınız və bəyənmələriniz davamlı motivasiyamızdır!