CSS Media Queries - Exempel
- Previous page CSS mediefrågor
- Next page RWD introduction
CSS Media Queries - Mer exempel
Låt oss se fler exempel på hur man använder media queries.
Media queries är en populär teknik för att skicka anpassade stilmallar till olika enheter.
Nedan visas ett enkelt exempel där vi ändrar bakgrundsfärgen för olika enheter:
Exempel
/* Sätt bakgrundsfärgen för body till kanelbrun */
body {
background-color: tan;
{}
/* På skärmar med 992 pixlar eller mindre, sätt bakgrundsfärgen till blå */
@media screen and (max-width: 992px) {
body {
background-color: blue;
{}
{}
/* På skärmar med 600 pixlar eller mindre, sätt bakgrundsfärgen till olivgrön */
@media screen and (max-width: 600px) {
body {
background-color: olive;
{}
{}
Vill du veta varför vi exakt använder 992px och 600px? Detta är vad vi kallar enhetens "typiska avbrott" (typical breakpoints). Du kan hitta fler exempel på detta i vår Responsive Web Design Tutorial Lär dig mer om typiska avbrott i CSS.
Menyns media query
I detta exempel använder vi media queries för att skapa en responsiv navigationsmeny som varierar beroende på olika skärmdimensioner.
Exempel
/* Navbar-container */
.topnav {
overflow: hidden;
background-color: #333;
{}
/* Navbar-länkar */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
{}
/* På skärmar med en bredd på 600 pixlar eller mindre, låt menulänkar staplas istället för att ligga sida vid sida */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
{}
{}
Kolonnens media query
En vanlig användning av media queries är att skapa en flexibel layout. I detta exempel skapar vi en layout som växlar mellan fyra kolonner, två kolonner och en full bredd kolonn beroende på olika skärmdimensioner:
Stor skärm:
Medelstor skärm:
Liten skärm:
Exempel
/* Skapa fyra lika kolonner som ligger sida vid sida */
.column {
float: left;
width: 25%;
{}
/* På skärmar med 992px eller mindre, byt från fyra kolonner till två kolonner */
@media screen and (max-width: 992px) {
.column {
width: 50%;
{}
{}
/* På skärmar med en bredd på 600 pixlar eller mindre, låt kolonnerna staplas istället för att ligga sida vid sida */
@media screen and (max-width: 600px) {
.column {
width: 100%;
{}
{}
Tip:en mer modern metod att skapa kolonnlayout är att använda CSS Flexbox (se exempel nedan). Men, Internet Explorer 10 och tidigare versioner stöder inte det. Om du behöver stöd för IE6-10, använd flytande (som visas ovan).
För att lära dig mer om modulen för flexbox-läggning, lär dig CSS Flexbox denna kapitel.
För att lära dig mer om responsiv webbdesign, lär dig vår Responsive Web Design Tutorial.
Exempel
/* Container för flexbox */
.row {
display: flex;
flex-wrap: wrap;
{}
/* Skapa fyra lika kolonner */
.column {
flex: 25%;
padding: 20px;
{}
/* På skärmar med 992px eller mindre, byt från fyra kolonner till två kolonner */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
{}
{}
/* På skärmar med en bredd på 600 pixlar eller mindre, låt kolonnerna staplas istället för att ligga sida vid sida */
@media screen and (max-width: 600px) {
.row {
flex-direction: column;
{}
{}
Dölja element med media queries
En annan vanlig användning av media queries är att dölja element på olika skärmdimensioner:
Jag kommer att dölja detta på små skärmar.
Exempel
/* Om skärmstorleken är 600 pixlar eller mindre, göm detta element */
@media screen and (max-width: 600px) {
div.example {
display: none;
{}
{}
Ändra teckenstorlek med mediaqueries
Du kan också använda mediaqueries för att ändra elementets teckenstorlek på olika skärmstorlekar:
Varierande teckenstorlek.
Exempel
/* Om skärmstorleken är över 600 pixlar, sätt storleken på <div>-texten till 80 pixlar */
@media screen and (min-width: 600px) {
div.example {
font-size: 80px;
{}
{}
/* Om skärmen är 600px eller mindre, sätt storleken på <div>-texten till 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
{}
{}
Flexibelt bildgalleri
I detta exempel använder vi mediaqueries tillsammans med flexbox för att skapa en responsiv bildgalleri:
Exempel
Flexibel webbplats
I detta exempel använder vi mediaqueries tillsammans med flexbox för att skapa en responsiv webbplats med flexibla navigationsmenyer och flexibla innehåll.
Exempel
Orientering: Porträtt / Landskap
Mediaqueries kan också användas för att ändra sidans layout baserat på browserns orientering.
Du kan ställa in ett antal CSS-egenskaper som endast gäller när browserfönstrets bredd är större än dess höjd, det vill säga i landskapsläge:
Exempel
Använd ljusblå bakgrundsfärg om orienteringen är i horisontell läge:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
{}
{}
Från minsta till största bredd
Du kan också använda max-width- och min-width-egenskaperna för att ställa in minsta och största bredd.
Till exempel, när browserns bredd ligger mellan 600 och 900 pixlar, ändra utseendet på <div>-elementet:
Exempel
@media screen and (max-width: 900px) and (min-width: 600px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
{}
{}
Använda tilläggsvärden: I följande exempel använder vi kommatecken (likt OR-operatorn) för att lägga till ytterligare mediaqueries till befintliga mediaqueries:
Exempel
/* När bredden ligger mellan 600 och 900 pixlar eller över 1100 pixlar - ändra utseendet på <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
{}
{}
CSS @media reference manual
For a complete overview of all media types and properties/expressions, please see CSS reference @media rule.
Tip:For more knowledge about responsive web design (how to target different devices and screens) and using media query breakpoints, please read our Responsive Web Design Tutorial.
- Previous page CSS mediefrågor
- Next page RWD introduction
