Հոդվածների տեղեկատու
Ինչպե՞ս է բջջային արձագանքող CSS-ը ցուցադրում տարբեր @media էկրանի արձագանքող դասավորություններ՝ ըստ տարբեր լուծումների:
Հետևյալ հոդվածը կներկայացնի, թե ինչպես օգտագործել CSS-ը՝ տարբեր լուծումներ որոշելու և տարբեր լայնության դասավորություններ ցուցադրելու համար՝ հարմարվողական լայնությանը հասնելու համար:
Կարիքավոր ընկերները կարող են անդրադառնալ դրան, հուսով եմ, որ այն օգտակար կլինի բոլորին:
Տարբերությունը @media և @media էկրանով տպագրվող վեբ էջերի միջև
- Եթե css-ը պետք է օգտագործվի տպագրական սարքում, օգտագործեք @media, հակառակ դեպքում՝ օգտագործեք @media էկրանը:
- Այնուամենայնիվ, դա պարտադիր չէ, որ ճիշտ լինի: Իրականում, եթե «էկրանը» փոխարինեք «print»-ով և գրեք որպես @media print, ապա CSS-ը կարող է օգտագործվել տպագրական սարքի վրա;
- Բայց նկատի ունեցեք, որ @media print-ի կողմից հայտարարված css-ը գործում է միայն տպագրական սարքերի վրա:
1. DIVCSS փոքր գործի նկարագրություն
Մենք նախ դրեցինք «.abc» անունով DIV տուփ CSS, դրա բարձրությունը սահմանեցինք 300px, իսկ CSS եզրագիծը սև:
- և կարգավորումները
margin:0 autoԴասավորությունը կենտրոնացած է, և այս երկու ոճերը նախապես սահմանված են հեշտ դիտման համար:
Մենք ձեռքով քաշում ենք զննարկիչը՝ լայնությունը ցուցադրելու համար, այնուհետև դիտում ենք, թե ինչպես է փոխվում տուփի լայնությունը.
- Երբ բրաուզերի լայնությունը ճշգրտվում է 500px-ից ոչ ավելի լայնության վրա, ցուցադրվում է տուփի լայնությանը համապատասխանող 100px;
- Երբ բրաուզերի լայնությունը կարգավորվում է 901px-ից պակաս, «.abc» ցուցադրվում է տուփի լայնությանը համապատասխան, որը ցուցադրում է 200px;
- Երբ բրաուզերի լայնությունը կարգավորվում է 1201px-ից մեծ լինելու համար, տուփի օբյեկտի լայնությունը ցուցադրվում է 1200px;
- Երբ այն 1200px-ից պակաս է, ցուցադրման լայնությունը 900px է:
2, 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宽度 */- Հարկ է նշել, որ CSS կոդերի կարգը CSS-ի շարադրումն է մեծից փոքր (դատելով, որ որքան մեծ է բրաուզերի լայնությունը, այնքան բարձր է ճակատը):
- Սա տրամաբանական հարաբերությունների պատճառով է, որ @media-ի դատողությունը CSS-ի վրիպազերծման վերաբերյալ կհանգեցնի դատողության ձախողմանը:
3. 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>Ծանոթագրություն՝ սարք-տեսանկյուն հարաբերակցություն
- սարքի հարաբերակցությունը կարող է օգտագործվել էկրանի հատուկ հարաբերակցությամբ սարքեր տեղադրելու համար, ինչը նույնպես օգտակար հատկություն է:
- Օրինակ՝ մեր էջը ցանկանում է ոճ սահմանել սովորական էկրանների համար՝ 4:3 հարաբերակցությամբ:
- Այնուհետև 16:9 և 16:10 լայն էկրանի համար սահմանեք մեկ այլ ոճ, ինչպիսիք են հարմարվողական լայնությունը և ֆիքսված լայնությունը.
- @մեդիա միայն էկրան և (սարքի հարաբերակցությունը՝ 4/3)
4. Համատեղելի է հիմնական բրաուզերների HTML+CSS+JS սկզբնական կոդը
<!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>Վերոնշյալը շարժական տերմինալի հարմարվողական CSS-ն է, որը ցուցադրում է տարբեր @media էկրանին արձագանքող մանրամասն բովանդակություն՝ ըստ տարբեր էկրանների:
Հույս Chen Weiliang բլոգ ( https://www.chenweiliang.com/ ) կիսվել է «Mobile Adaptive CSS Different Screens Display Different @media Screen Responsive», որը օգտակար է ձեզ համար:
Բարի գալուստ՝ կիսելու այս հոդվածի հղումը.https://www.chenweiliang.com/cwl-2074.html
Բարի գալուստ Chen Weiliang-ի բլոգի Telegram ալիք՝ վերջին թարմացումները ստանալու համար:
📚 Այս ուղեցույցը պարունակում է հսկայական արժեք, 🌟Սա հազվագյուտ հնարավորություն է, բաց մի՛ թողեք այն։ ⏰⌛💨
Տարածեք և հավանեք, եթե հավանեցիք:
Ձեր տարածումը և հավանումները մեր շարունակական շարժառիթն են: