Imenik članaka
Kako mobilni responzivni CSS prikazuje različite responzivne @media zaslone izgleda prema različitim rezolucijama?
Sljedeći članak predstavit će vam kako koristiti CSS za određivanje različitih razlučivosti i prikaza različitih rasporeda širine za postizanje prilagodljive širine.
Prijatelji u nevolji se mogu obratiti na njega, nadam se da će svima biti od pomoći.
Razlika između sitotisaka web stranica @media i @media
- Ako se css treba koristiti u uređaju za ispis, koristite @media, inače koristite @media screen.
- Međutim, to nije nužno točno. Zapravo, ako zamijenite "screen" s "print" i napišete to kao @media print, tada se CSS može koristiti na uređaju za ispis;
- Ali imajte na umu da je css deklariran @media print važeći samo na uređajima za ispis.
1. DIVCSS opis malog slučaja
Prvo smo postavili DIV okvir CSS pod nazivom ".abc", postavili njegovu visinu na 300px i postavili CSS obrub na crnu;
- i postavke
margin:0 autoIzgled je centriran, a ova su dva stila unaprijed postavljena za lakši pregled.
Ručno povlačimo preglednik da prikažemo širinu, a zatim promatramo kako se širina okvira mijenja:
- Kada je širina preglednika podešena na širinu ne veću od 500px, prikazuje se 100px što odgovara širini okvira;
- Kada je širina preglednika podešena na manje od 901px, prikazuje se ".abc" koji odgovara širini okvira, koji prikazuje 200px;
- Kada je širina preglednika podešena tako da bude veća od 1201px, širina objekta okvira prikazuje 1200px;
- Kada je manja od 1200px, širina prikaza je 900px.
2, CSS mobilni telefon mobilni terminal prilagodljivi 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 redoslijed CSS koda postavlja CSS od velikog prema malom (procjenjujući da što je veća širina preglednika, to je veća prednja strana).
- To je zbog logičnog odnosa, procjena @media o otklanjanju pogrešaka u CSS-u uzrokovat će neuspjeh prosudbe.
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 širine i visine uređaja
- device-aspect-ratio može se koristiti za prilagodbu uređaja s određenim omjerima stranica zaslona, što je također korisno svojstvo.
- Na primjer, naša stranica želi definirati stil za normalne zaslone s omjerom stranica 4:3.
- Zatim za široki zaslon 16:9 i 16:10 definirajte drugi stil, kao što je prilagodljiva širina i fiksna širina:
- Zaslon samo za @medije i (omjer širine i visine uređaja:4/3)
4. Kompatibilan s glavnim preglednicima 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 navedeno je prilagodljivi CSS za mobilni telefon, koji prikazuje različite detaljne sadržaje koji reagiraju na @media zaslon prema različitim zaslonima.
Blog Hope Chen Weiliang ( https://www.chenweiliang.com/ ) Dijeljeno "Mobile Adaptive CSS Different Screens Display Different @media Screen Responsiveness", što vam je od pomoći.
Dobrodošli da podijelite vezu ovog članka:https://www.chenweiliang.com/cwl-2074.html
Dobro došli na Telegram kanal Chen Weiliangovog bloga da dobijete najnovija ažuriranja!
📚 Ovaj vodič ima veliku vrijednost, 🌟 Ovo je rijetka prilika, nemojte je propustiti! ⏰⌛💨
Podijelite i lajkajte ako vam se sviđa!
Vaše dijeljenje i lajkovi naša su stalna motivacija!