Ricerca Media CSS3

Le query di media CSS ti permettono di formattare il documento in modo che venga visualizzato correttamente su dispositivi di uscita di diverse dimensioni.

Query di media e progettazione web responsiva

Le query di media ti permettono di personalizzare il modo in cui le pagine web vengono visualizzate per una gamma specifica di dispositivi (ad esempio, telefoni cellulari, tablet, computer desktop, ecc.) senza modificare il markup. Le query di media sono composte da un tipo di media e da zero o più espressioni che corrispondono a condizioni specifiche di un media (ad esempio, larghezza del dispositivo o risoluzione dello schermo).

Siccome le query di media sono espressioni logiche, possono essere解析ate come true o false. Se il tipo di media specificato nella query di media corrisponde al tipo di dispositivo del documento visualizzato e soddisfa tutte le espressioni nella query di media, il risultato della query è true. Quando la query di media è true, le tabelle di stili o le regole di stile pertinenti vengono applicate al dispositivo di destinazione. Questo è un esempio semplice di query di media per dispositivi standard.

/* Smartphones (portrait and landscape) ---------- */
@media screen and (min-width: 320px) and (max-width: 480px) {
　　　　/*　styles　*/
}
/* Smartphones (portrait) ---------- */
@media screen and (max-width: 320px) {
　　　　/*　styles　*/
}
/* Smartphones (landscape) ---------- */
@media screen and (min-width: 321px) {
　　　　/*　styles　*/
}
/*　Tablets,　iPads　(portrait　and　landscape)　----------　*/
@media screen and (min-width: 768px) and (max-width: 1024px){
　　　　/*　styles　*/
}
/*　Tablets,　iPads　(portrait)　----------　*/
@media screen and (min-width: 768px){
　　　　/*　styles　*/
}
/*　Tablets,　iPads　(landscape)　----------　*/
@media screen and (min-width: 1024px){
　　　　/*　styles　*/
}
/*　Desktops　and　laptops　----------　*/
@media screen and (min-width: 1224px){
　　　　/*　styles　*/
}
/*　Large　screens　----------　*/
@media screen and (min-width: 1824px){
　　　　/*　styles　*/
}

Modifica la larghezza delle colonne in base alla dimensione dello schermo

Puoi utilizzare le query CSS per modificare la larghezza della pagina web e degli elementi correlati, offrendo agli utenti la migliore esperienza di visualizzazione su dispositivi diversi.

Le seguenti regole di stile cambieranno automaticamente la larghezza dell'elemento contenitore in base alla dimensione dello schermo o della viewport. Ad esempio, se la larghezza della viewport è inferiore a 768 pixel, coprirà il 100% della larghezza della viewport, se è superiore a 768 pixel ma inferiore a 1024 pixel, allora sarà di 750 pixel, ecc.

.container　{
　　　　margin: 0 auto;
　　　　background: #f2f2f2;
　　　　box-sizing:　border-box;
}
/*　Mobile　phones　(portrait　and　landscape)　----------　*/
@media　screen　and　(max-width:　767px){
　　　　.container　{
　　　　　　　　width:　100%;
　　　　　　　　padding: 0 10px;
　　　　}
}
/*　Tablets　and　iPads　(portrait　and　landscape)　----------　*/
@media screen and (min-width: 768px) and (max-width: 1023px){
　　　　.container　{
　　　　　　　　width: 750px;
　　　　　　　　padding: 0 10px;
　　　　}
}
/*　Low　resolution　desktops　and　laptops　----------　*/
@media　screen　and　(min-width:　1024px)　{
　　　　.container　{
　　　　　　　　width:　980px;
　　　　　　　　padding:　0　15px;
　　　　}
}
/*　High　resolution　desktops　and　laptops　----------　*/
@media　screen　and　(min-width:　1280px)　{
　　　　.container　{
　　　　　　　　width:　1200px;
　　　　　　　　padding:　0　20px;
　　　　}
}

Modifica del Layout in Base alle Dimensioni dello Schermo

Puoi anche utilizzare le query media CSS per rendere la tua layout a più colonne del sito più adattabile, e con pochissime personalizzazioni puoi essere responsive su vari dispositivi.

Se la dimensione del viewport è maggiore o uguale a 768 pixel, le seguenti regole di stile creeranno un layout a due colonne, ma se è inferiore o uguale a 768 pixel, verrà presentato come una colonna.

.column　{
　　　　width:　48%;
　　　　padding:　0　15px;
　　　　box-sizing:　border-box;
　　　　background:　#93dcff;
　　　　float:　left;
}
.container　.column:first-child{
　　　　margin-right:　4%;
}
@media　screen　and　(max-width:　767px){
　　　　.column　{
　　　　　　　　width:　100%;
　　　　　　　　padding:　5px　20px;
　　　　　　　　float:　none;
　　　　}
　　　　.container　.column:first-child{
　　　　　　　　margin-right:　0;
　　　　　　　　margin-bottom:　20px;
　　　　}
}