Article Directory
Kako mobilni responzivni CSS prikazuje različite @media screen responzivne izglede prema različitim rezolucijama?
Sljedeći članak će predstaviti kako koristiti CSS za određivanje različitih rezolucija i prikaz različitih rasporeda širine kako bi se postigla prilagodljiva širina.
Prijatelji u nevolji mogu se obratiti, nadam se da će svima biti od pomoći.
Razlika između @media i @media web stranica za sito štampanje
- Ako css treba da se koristi u uređaju za štampanje, koristite @media, u suprotnom koristite @media screen.
- Međutim, ovo nije nužno tačno.U stvari, ako zamenite "screen" sa "print" i napišete ga kao @media print, onda se CSS može koristiti na uređaju za štampanje;
- Ali imajte na umu da je css deklariran od strane @media print važeći samo na uređajima za štampanje.
1. DIVCSS mali opis slučaja
Prvo smo postavili CSS DIV okvira pod nazivom ".abc", postavili njegovu visinu na 300px i postavili CSS ivicu na crnu;
- i postavke
margin:0 autoRaspored je centriran, a ova dva stila su unapred podešena za lakše gledanje.
Ručno prevlačimo pretraživač da prikažemo širinu, a zatim posmatramo kako se širina okvira menja:
- Kada se širina pretraživača podesi na širinu ne veću od 500px, prikazuje se 100px što odgovara širini okvira;
- Kada je širina pretraživača podešena na manju od 901px, prikazuje se ".abc" u skladu sa širinom okvira, koji prikazuje 200px;
- Kada je širina pretraživača podešena da bude veća od 1201px, širina okvirnog objekta prikazuje 1200px;
- Kada je manji od 1200px, širina prikaza je 900px.
2, CSS mobilni telefon mobilni terminal adaptivni kod
.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宽度 */- Treba napomenuti da redosled CSS koda postavlja CSS od velikog ka malom (procenjujući da što je širina pretraživača veća, prednji deo je veći).
- Ovo je zbog logičnog odnosa, @media-ova odluka o CSS otklanjanju grešaka će uzrokovati neuspeh.
3. HTML kod
<!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>Napomena: omjer slike uređaja
- device-aspect-ratio se može koristiti za prilagođavanje uređaja sa specifičnim omjerima ekrana, što je također korisno svojstvo.
- Na primjer, naša stranica želi definirati stil za normalne ekrane sa omjerom stranica 4:3.
- Zatim za široki ekran 16:9 i 16:10 definirajte drugi stil, kao što su prilagodljiva širina i fiksna širina:
- @medijski samo ekran i (omjer širine i visine uređaja: 4/3)
4. Kompatibilan sa glavnim pretraživačima HTML+CSS+JS izvorni kod
<!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>Gore navedeni je prilagodljivi CSS mobilnog terminala, koji prikazuje različit detaljan sadržaj koji odgovara na @media screen prema različitim ekranima.
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) Share "Mobile Adaptive CSS Different Screens Display Different @media Screen Responsiveness", što vam je od pomoći.
Dobrodošli da podijelite link ovog članka:https://www.chenweiliang.com/cwl-2074.html
Dobrodošli na Telegram kanal bloga Chen Weilianga kako biste dobili najnovije informacije!
📚 Ovaj vodič ima ogromnu vrijednost, 🌟Ovo je rijetka prilika, ne propustite je! ⏰⌛💨
Podelite i lajkujte ako želite!
Vaše dijeljenje i lajkovi su naša stalna motivacija!