Cyfeiriadur Erthygl
Sut mae CSS ymatebol symudol yn arddangos gwahanol gynlluniau ymatebol sgrin @media yn ôl gwahanol benderfyniadau?
Bydd yr erthygl ganlynol yn cyflwyno sut i ddefnyddio CSS i bennu gwahanol benderfyniadau ac arddangos gosodiadau lled gwahanol i gyflawni lled addasol.
Gall ffrindiau mewn angen gyfeirio ato, gobeithio y bydd o gymorth i bawb.
Y gwahaniaeth rhwng tudalennau gwe argraffu sgrin @media a @media
- Os oes angen defnyddio'r css mewn dyfais argraffu, defnyddiwch @media, fel arall, defnyddiwch sgrin @media.
- Fodd bynnag, nid yw hyn o reidrwydd yn wir. Mewn gwirionedd, os byddwch yn disodli "screen" gyda "print" a'i ysgrifennu fel print @media, yna gellir defnyddio'r CSS ar y ddyfais argraffu;
- Ond sylwch fod y css a ddatganwyd gan @media print yn ddilys ar ddyfeisiau argraffu yn unig.
1. Disgrifiad achos bach DIVCSS
Yn gyntaf fe wnaethom osod CSS blwch DIV o'r enw ".abc", gosod ei uchder i 300px, a gosod ffin CSS i ddu;
- a gosodiadau
margin:0 autoMae'r cynllun wedi'i ganoli, ac mae'r ddau arddull hyn wedi'u gosod ymlaen llaw i'w gweld yn hawdd.
Rydyn ni'n llusgo'r porwr â llaw i ddangos y lled, ac yna'n arsylwi sut mae lled y blwch yn newid:
- Pan fydd lled y porwr yn cael ei addasu i led o ddim mwy na 500px, mae 100px yn cael ei arddangos yn cyfateb i led y blwch;
- Pan fydd lled y porwr yn cael ei addasu i fod yn llai na 901px, ".abc" yn cael ei arddangos yn cyfateb i lled y blwch, sy'n dangos 200px;
- Pan fydd lled y porwr yn cael ei addasu i fod yn fwy na 1201px, mae lled y gwrthrych blwch yn arddangos 1200px;
- Pan fydd yn llai na 1200px, lled yr arddangosfa yw 900px.
2, cod addasol terfynell symudol ffôn symudol 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宽度 */- Dylid nodi bod y gorchymyn cod CSS yn cysodi CSS o fawr i fach (gan farnu po fwyaf yw lled y porwr, yr uchaf yw'r blaen).
- Mae hyn oherwydd y berthynas resymegol, bydd dyfarniad @media o ddadfygio CSS yn achosi i'r dyfarniad fethu.
3. cod 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>Nodyn: dyfais-agwedd-cymhareb
- gellir defnyddio cymhareb dyfais-agwedd i ffitio dyfeisiau â chymarebau agwedd sgrin benodol, sydd hefyd yn briodwedd ddefnyddiol.
- Er enghraifft, mae ein tudalen eisiau diffinio arddull ar gyfer sgriniau arferol gyda chymhareb agwedd o 4:3.
- Yna ar gyfer sgrin lydan 16:9 a 16:10, diffiniwch arddull arall, fel lled addasol a lled sefydlog:
- Sgrin @cyfryngau yn unig a (cymhareb agwedd-dyfais: 4/3)
4. Yn gydnaws â'r prif borwyr HTML+CSS+JS cod ffynhonnell
<!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>Yr uchod yw CSS addasol y derfynell symudol, sy'n dangos cynnwys manwl ymatebol sgrin @media gwahanol yn ôl gwahanol sgriniau.
Blog Chen Weiliang Gobeithio ( https://www.chenweiliang.com/ ) Wedi'i rannu "Sgriniau Symudol CSS Addasol Gwahanol yn Arddangos Ymatebolrwydd Sgrin @media Gwahanol", sy'n ddefnyddiol i chi.
Croeso i chi rannu dolen yr erthygl hon:https://www.chenweiliang.com/cwl-2074.html
Croeso i sianel Telegram o blog Chen Weiliang i gael y diweddariadau diweddaraf!
📚 Mae'r canllaw hwn yn cynnwys gwerth enfawr, 🌟Mae hwn yn gyfle prin, peidiwch â'i golli! ⏰⌛💨
Rhannwch a hoffwch os hoffech chi!
Eich rhannu a'ch hoff bethau yw ein cymhelliant parhaus!