Article Directory
Ahoana no fomba anehoan'ny CSS responsive amin'ny finday ny fisehon'ny efijerin'ny haino aman-jery samihafa araka ny fanapahan-kevitra samihafa?
Ny lahatsoratra manaraka dia hampiditra ny fomba fampiasana CSS hamaritana ny fanapahan-kevitra samihafa ary hanehoana ny sakan'ny sakany mba hahatratrarana ny sakan'ny adaptive.
Ireo namana sahirana dia afaka manondro azy, manantena aho fa hanampy ny rehetra.
Ny mahasamihafa ny @media sy @media amin'ny pejin-tranonkala fanontam-pirinty
- Raha toa ka mila ampiasaina amin'ny fitaovana fanontam-pirinty ny css dia ampiasao ny @media, raha tsy izany dia ampiasao ny @media screen.
- Tsy voatery ho marina anefa izany fa raha soloinao amin'ny "printy" ny "écran" ka soratanao @ media printy dia azo ampiasaina amin'ny fitaovana fanontam-pirinty ny CSS;
- Mariho anefa fa ny css nambaran'ny @media printy dia tsy manan-kery afa-tsy amin'ny fitaovana fanontana.
1. DIVCSS famaritana tranga kely
Nametraka CSS boaty DIV voalohany antsoina hoe ".abc" izahay, mametraka ny haavony ho 300px, ary mametraka ny sisintany CSS ho mainty;
- ary fika
margin:0 autoNy lamina dia afovoany, ary ireo fomba roa ireo dia napetraka mialoha mba ho mora jerena.
Ataontsika tanana ny navigateur mba hanehoana ny sakany, ary avy eo dia jereo ny fiovan'ny sakan'ny boaty:
- Rehefa amboarina amin'ny sakany tsy mihoatra ny 500px ny sakan'ny navigateur, dia aseho mifanaraka amin'ny sakan'ny boaty ny 100px;
- Rehefa amboarina ho latsaky ny 901px ny sakan'ny navigateur, dia aseho mifanaraka amin'ny sakan'ny boaty ny ".abc", izay mampiseho 200px;
- Rehefa amboarina ho lehibe noho 1201px ny sakan'ny navigateur, dia mampiseho 1200px ny sakan'ny zavatra boaty;
- Raha latsaky ny 1200px dia 900px ny sakany.
2, CSS adaptive terminal finday finday
.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宽度 */- Marihina fa ny baikon'ny kaody CSS dia mametaka CSS manomboka amin'ny lehibe ka hatramin'ny kely (mitsara fa ny sakan'ny navigateur no avo kokoa ny anoloana).
- Izany dia noho ny fifandraisana lojika, ny fitsaràn'ny media momba ny debugging CSS dia hahatonga ny fitsarana tsy hahomby.
3. Kaody 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>Fanamarihana: fitaovana-aspect ratio
- azo ampiasaina hifanaraka amin'ny fitaovana misy ny tahan'ny lafiny efijery manokana, izay fananana mahasoa ihany koa.
- Ohatra, ny pejinay dia te hamaritra fomba ho an'ny efijery mahazatra miaraka amin'ny lafiny 4:3.
- Avy eo, ho an'ny efijery malalaka 16:9 sy 16:10, mamaritra fomba iray hafa, toy ny sakany adaptive sy ny sakany voafaritra:
- @fampahalalam-baovao ihany ecran sy (fitaovana-aspect ratio:4/3)
4. Mifanaraka amin'ny navigateur lehibe HTML+CSS+JS code source
<!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>Ity ambony ity dia CSS adaptive terminal finday, izay mampiseho votoaty amin'ny antsipiriany momba ny efijery @media samihafa araka ny efijery samihafa.
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) Nozaraina "Ecran Different CSS Adaptive Mobile dia mampiseho ny famaliana ny efijery @media", izay manampy anao.
Tongasoa eto mizara ny rohy amin'ity lahatsoratra ity:https://www.chenweiliang.com/cwl-2074.html
Tongasoa eto amin'ny fantsona Telegram an'ny bilaogin'i Chen Weiliang hahazoana vaovao farany!
📚 Ity torolalana ity dia misy sanda lehibe, 🌟Ity dia fotoana tsy fahita firy, aza adino! ⏰⌛💨
Partageo ary j'aime raha tianao!
Ny fizaranao sy ny j'aime no antony manosika anay hatrany!