Tusitusiga Tusitusiga
E fa'afefea ona fa'aalia e CSS tali fa'a-telefoni ese'ese @media fa'aaliga tali fa'atusa e tusa ai ma fa'aiuga eseese?
O le tusiga o loʻo mulimuli mai o le a faʻaalia ai le faʻaogaina o le CSS e fuafua ai faʻaiuga eseese ma faʻaalia ai le lautele o le lautele e ausia ai le lautele faʻafetaui.
E mafai e uo o loʻo manaʻomia ona faasino i ai, ou te faʻamoemoe o le a fesoasoani i tagata uma.
Le eseesega i le va o le @media ma le @media itulau lolomi ata
- Afai e manaʻomia le faʻaogaina o le css i se masini lomitusi, faʻaaoga @media, a leai, faʻaoga @media screen.
- Ae ui i lea, e le moni lenei mea.O le mea moni, afai e te suia le "screen" ma le "lomi" ma tusi e pei o le @media print, ona mafai lea ona faʻaogaina le CSS i luga o le masini lomitusi;
- Ae ia maitauina o le css na faʻaalia e @media lolomi e naʻo le aoga i masini lomitusi.
1. DIVCSS fa'amatalaga la'ititi
Matou te seti muamua se DIV pusa CSS igoa ".abc", seti lona maualuga i le 300px, ma seti le tuaoi CSS i le uliuli;
- ma faatulagaga
margin:0 autoO le fa'atulagaga e totonugalemu, ma o nei sitaili e lua ua fa'atulaga muamua mo le va'aiga faigofie.
Matou te tosoina ma le lima le suʻega e faʻaalia le lautele, ona vaʻai lea pe faʻafefea ona suia le lautele o le pusa:
- Pe a fetuutuunai le lautele ole su'esu'ega ile lautele e le sili atu ile 500px, 100px e fa'aalia e fetaui ma le lautele o le pusa;
- Pe a fetuutuunai le lautele o le suʻesuʻega ia itiiti ifo i le 901px, ".abc" o loʻo faʻaalia e fetaui ma le lautele o le pusa, lea e faʻaalia ai le 200px;
- Pe a fetuutuunai le lautele o le browser e sili atu nai lo le 1201px, o le lautele o le mea pusa e faʻaalia 1200px;
- A itiiti ifo i le 1200px, o le lautele fa'aaliga e 900px.
2, CSS fe'avea'i fe'avea'i fe'avea'i fe'avea'i fa'ailoga fetuutuunai
.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宽度 */- E tatau ona maitauina o le CSS code order o loʻo faʻapipiʻiina le CSS mai le tele i le laʻititi (faʻamaonia o le tele o le lautele o le browser, o le maualuga lea o le pito i luma).
- E mafua lenei mea ona o le fesoʻotaʻiga talafeagai, @media's faʻasalaga o le CSS debugging o le a mafua ai ona toilalo le faʻamasinoga.
3. HTML code
<!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>Manatua: masini-tulaga-fuaitau
- masini-aspect ratio e mafai ona faʻaogaina e fetaui ma masini faʻatasi ai ma fua faʻatatau o lau mata, o se mea aoga foi.
- Mo se faʻataʻitaʻiga, o le matou itulau e manaʻo e faʻamalamalamaina se sitaili mo lau masani ma se fua faatatau o le 4:3.
- Ona mo le 16:9 ma le 16:10 lau lautele, fa'amatala se isi sitaili, e pei o le lautele fetuutuunai ma le lautele fa'amau:
- @media na'o le lau ma (vaega-ituaiga-vaega:4/3)
4. E fetaui ma su'esu'ega tetele HTML+CSS+JS source code
<!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>O loʻo i luga o le CSS adaptive terminal telefoni feaveaʻi, lea e faʻaalia ai le @media screen tali faʻamatalaga auiliiliga e tusa ai ma lau eseese.
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) Fetufa'ai "Mobile Adaptive CSS Different Screens Display Different @media Screen Responsiveness", lea e fesoasoani ia te oe.
Fa'afeiloa'i e fa'asoa le so'otaga o lenei tusitusiga:https://www.chenweiliang.com/cwl-2074.html
Faʻafeiloaʻi i le Telegram channel o le blog a Chen Weiliang e maua ai faʻamatalaga lata mai!
📚 O lenei taʻiala o loʻo i ai le taua tele, 🌟O se avanoa e seasea maua, aua le misia! ⏰⌛💨
Faasoa ma fiafia pe a e fiafia i ai!
O lau fefa'asoaa'i ma le fiafia o la matou fa'aosofiaga faifaipea!