articulus Directory
Quomodo mobile responsivum CSS ostendit diversas @medias rationes velum responsivas secundum diversas resolutiones?
Articulus sequens introducet quomodo CSS utatur ad diversas resolutiones determinandas et diversas latitudines explicandas ad latitudinem adaptivam consequendam ostendet.
Amici indigentes ad eam referre possunt, spero omnibus profuturum esse.
Discrimen inter @media et @media tegumentum excudendi paginas
- Si css in fabrica typographica adhibenda est, @media uti, secus uti @media velum.
- Sed hoc non est necessario verum: re vera, si "screen" cum "print" reponere et scribe id ut @media print, tunc CSS adhiberi potest in fabrica typographica;
- Sed nota quod css per @media print declarat tantum valet in machinis typographicis.
1. DIVCSS parva causa descriptionem
Arcam DIV CSS ".abc" nomine ".abc" constituimus, altitudinem eius ad 300px constituimus, et terminum CSS ad nigrum constituimus;
- et occasus
margin:0 autoPropositum est centrum, et hi duo styli praecedunt faciles intuitus.
Manually navigatrum trahunt ut latitudinem ostendant, et tunc observamus quomodo latitudo archa mutationes:
- Cum latitudo navigatoris ad latitudinem non amplius 500px adaptatur, 100px latitudini arcae respondet;
- Cum latitudo navigatoris adaequatum sit minus quam 901px, ".abc" proponitur secundum latitudinem arcae, quae 200px exhibet;
- Cum latitudo navigatrum adaptatur maior quam 1201px, latitudo archa objecti 1200px ostendit;
- Cum minor quam 1200px, latitudo ostentationis 900px est.
2, CSS mobile phone mobile terminatio code adaptive
.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宽度 */- Animadvertendum est ordinem CSS codicem esse typothetarum CSS a magno ad parvum (iudicio latitudinis navigatri maiorem, anteriorem superiorem).
- Hoc est propter relationem logicam, iudicium CSS debugging @ media iudicium causabit.
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>Nota: fabrica aspect-ratio
- proportio fabrica-aspectus adhiberi potest ad aptas machinas cum rationibus velimentis specificis, quae etiam proprietas utilis est.
- Exempli gratia, pagina nostra stilum pro tegumentis normalibus rationem cum ratione 4:3 definire vult.
- Deinde pro 16:9 et 16:10 amplitudine, alium stylum definire, ut latitudinem accommodam et latitudinem fixam;
- @media tantum velum ac (ratio aspectum-ratio: 4/3)
4. Compatible cum majoribus navigatoribus 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>Praedicta est mobilis terminatio adaptiva CSS, quae differentiam @mediae screen responsiva detailed contentorum ostendit secundum varias tegumenta.
Spes Chen Weiliang Blog ( https://www.chenweiliang.com/ ) Communes "Mobile Adaptivum CSS Diversa Screens Ostende Diversa @media Screen Responsoria", quod tibi utile est.
Grata communicare nexum huius articuli:https://www.chenweiliang.com/cwl-2074.html
Grata ad canalem Telegram Chen Weiliang's blog ut tardus updates!
📚 Hic dux ingens valorem continet, 🌟 Haec rara occasio est, id non fallunt! ⏰⌛💨
Share and like si libet!
Tua communicatio et similia continua sunt motiva nostra!