Directory articoli
In che modo i CSS reattivi per dispositivi mobili visualizzano layout reattivi dello schermo @media diversi in base a risoluzioni diverse?
Il seguente articolo introdurrà come utilizzare i CSS per determinare risoluzioni diverse e visualizzare layout di larghezza diversa per ottenere una larghezza adattiva.
Gli amici bisognosi possono farne riferimento, spero possa essere utile a tutti.
Differenza tra le pagine Web per la serigrafia di @media e @media
- Se il CSS deve essere utilizzato in un dispositivo di stampa, utilizzare @media, altrimenti utilizzare @media screen.
- Tuttavia, questo non è necessariamente vero, infatti, se sostituisci "screen" con "print" e lo scrivi come @media print, allora il CSS può essere utilizzato sul dispositivo di stampa;
- Ma nota che il css dichiarato da @media print è valido solo sui dispositivi di stampa.
1. Descrizione del caso piccolo DIVCSS
Per prima cosa impostiamo un CSS box DIV chiamato ".abc", impostiamo la sua altezza su 300px e impostiamo il bordo CSS su nero;
- e impostazioni
margin:0 autoIl layout è centrato e questi due stili sono preimpostati per una facile visualizzazione.
Trasciniamo manualmente il browser per visualizzare la larghezza, quindi osserviamo come cambia la larghezza della casella:
- Quando la larghezza del browser viene regolata su una larghezza non superiore a 500px, viene visualizzato 100px corrispondente alla larghezza del riquadro;
- Quando la larghezza del browser viene regolata per essere inferiore a 901px, viene visualizzato ".abc" corrispondente alla larghezza della casella, che visualizza 200px;
- Quando la larghezza del browser viene regolata per essere maggiore di 1201px, la larghezza dell'oggetto box visualizza 1200px;
- Quando è inferiore a 1200 px, la larghezza di visualizzazione è 900 px.
2, codice adattivo del terminale mobile del telefono mobile 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宽度 */- Va notato che l'ordine del codice CSS sta componendo CSS da grande a piccolo (a giudicare che maggiore è la larghezza del browser, maggiore è la parte anteriore).
- Ciò è dovuto alla relazione logica, il giudizio di @media sul debug CSS farà fallire il giudizio.
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: rapporto d'aspetto del dispositivo
- device-aspect-ratio può essere utilizzato per adattare dispositivi con specifiche proporzioni dello schermo, che è anche una proprietà utile.
- Ad esempio, la nostra pagina vuole definire uno stile per schermi normali con un rapporto di aspetto di 4:3.
- Quindi, per il widescreen 16:9 e 16:10, definisci un altro stile, ad esempio larghezza adattiva e larghezza fissa:
- @schermata solo media e (rapporto aspetto-dispositivo:4/3)
4. Compatibile con i principali browser HTML+CSS+JS codice sorgente
<!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>Quanto sopra è il CSS adattivo del terminale mobile, che mostra diversi contenuti dettagliati responsivi dello schermo @media in base alle diverse schermate.
Speranza Chen Weiliang Blog ( https://www.chenweiliang.com/ ) Condiviso "Mobile Adaptive CSS Different Screens Display Different @media Screen Responsiveness", che è utile per te.
Benvenuti a condividere il link di questo articolo:https://www.chenweiliang.com/cwl-2074.html
Benvenuto nel canale Telegram del blog di Chen Weiliang per ricevere gli ultimi aggiornamenti!
📚 Questa guida contiene un valore enorme, 🌟Questa è un'opportunità rara, non perderla! ⏰⌛💨
Condividi e metti mi piace se ti va!
La tua condivisione e i tuoi like sono la nostra continua motivazione!