Articulu Directory
Cumu a CSS mobile responsive mostra diversi layout di rispunsibilità di u schermu @media secondu diverse risoluzioni?
L'articulu seguente introduverà cumu utilizà CSS per determinà e diverse risoluzioni è visualizà diversi layout di larghezza per ottene una larghezza adattativa.
L'amichi in bisognu ponu riferite, spergu chì serà utile à tutti.
Differenza trà e pagine web di stampa di serigrafia @media è @media
- Se u css deve esse usatu in un dispositivu di stampa, utilizate @media, altrimente, utilizate @media screen.
- In ogni casu, questu ùn hè micca necessariamente veru. In fatti, se sustituite "schermu" cù "print" è scrivite cum'è @media print, allora u CSS pò esse usatu in u dispusitivu di stampa;
- Ma attenzione, u css dichjaratu da @media print hè validu solu nantu à i dispositi di stampa.
1. DIVCSS discrizzione casu picculu
Avemu prima stabilitu una casella DIV CSS chjamatu ".abc", stabilisce a so altezza à 300px, è stabilisce u cunfini CSS in neru;
- è paràmetri
margin:0 auto
U layout hè centratu, è sti dui stili sò predeterminati per una visualizazione faciule.
Trascinamu manualmente u navigatore per vede a larghezza, è poi observemu cumu cambia a larghezza di a casella:
- Quandu a larghezza di u navigatore hè aghjustatu à una larghezza di micca più di 500px, 100px hè visualizatu currispondente à a larghezza di a casella;
- Quandu a larghezza di u navigatore hè aghjustatu per esse menu di 901px, ".abc" hè visualizatu currispondente à a larghezza di a casella, chì mostra 200px;
- Quandu a larghezza di u navigatore hè aghjustatu per esse più grande di 1201px, a larghezza di l'ughjettu di scatula hè visualizata cum'è 1200px;
- Quandu hè menu di 1200px, a larghezza di a visualizazione hè 900px.
2, CSS telefuninu mobile codice adattativu terminale mobile
.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宽度 */
- Hè devi esse nutatu chì l'ordine di codice CSS hè tipografia CSS da grande à chjuca (ghjudicà chì a più grande a larghezza di u navigatore, u più altu u fronte).
- Questu hè per via di a relazione logica, u ghjudiziu di @media di debugging CSS pruvucarà u ghjudiziu à falla.
3. codice 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>
Nota: rapportu d'aspettu di u dispusitivu
- device-aspect-ratio pò ièssiri usatu a fit à i dispusitivi cù aspettu schermu specifichi ratios, chì hè dinù una pruprietà utile.
- Per esempiu, a nostra pagina vole definisce un stile per schermi normali cù un rapportu d'aspettu di 4: 3.
- Allora per 16:9 è 16:10 widescreen, definisce un altru stile, cum'è a larghezza adattativa è a larghezza fissa:
- @media solu schermu è (device-aspect-ratio: 4/3)
4. Compatible cù i principali navigatori HTML + CSS + codice fonte 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>
U sopratuttu hè u CSS adattatu per u telefuninu mobile, chì mostra un cuntenutu detallatu responsive di schermu @media differente secondu diverse schermi.
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) Shared "Mobile Adaptive CSS Different Screens Display Different @media Screen Responsiveness", chì hè utile per voi.
Benvenuti à sparte u ligame di stu articulu:https://www.chenweiliang.com/cwl-2074.html
Benvenuti à u canali Telegram di u blog di Chen Weiliang per avè l'ultime aghjurnamenti!
📚 Questa guida cuntene un valore enormu, 🌟Questa hè una rara opportunità, ùn mancate micca! ⏰⌛💨
Condividi è mi piace se ti piace!
A vostra spartera è Mi piace sò a nostra motivazione cuntinua!