CSS3 @media

Her kan du stille og svare på spørgsmål omkring CSS
Besvar
henrik_t7
Nørd
Nørd
Indlæg:102
Tilmeldt:26. jul 2011, 20:12
CSS3 @media

Indlæg af henrik_t7 » 4. apr 2014, 22:24

Hej.

Jeg støt på CSS3 @media, hvad er det?
Jeg har set følgende eks.

@media all and (min-width: 960px)
@media all and (max-width: 959px) and (min-width: 481px)
@media all and (max-width: 519px)

Hvad betyder alt dette og hvordan virker det, hvad kan det bruges til?

:lol: Henrik
Top
Brugeravatar
scootergrisen
Moderator
Moderator
Indlæg:709
Tilmeldt:21. jun 2012, 23:40
Kontakt:
Kontakt scootergrisen

Re: CSS3 @media

Indlæg af scootergrisen » 5. apr 2014, 13:51

Det er så man ændre hjemmesidens udseende alt efter hvor meget plads der er.

For eksempel så når man ser hjemmesiden på en mobilenhed med lille skærm så kan man gøre teksten mindre og skjule nogle elementer og gøre menuen kompakt.

Du kan prøve og gøre browservinduet mindre her på hjemmesiden også læg mærke til hvordan menuen ændre sig.
Top
Brugeravatar
ThomasI
Grundlægger
Grundlægger
Indlæg:1528
Tilmeldt:28. dec 2010, 10:49

Re: CSS3 @media

Indlæg af ThomasI » 5. apr 2014, 14:12

Som Scootergrisen også er inde på, så er det til at lave din side responsive, således at din side tilpasser sig efter den skræm brugeren anvender.

Eksempel:

Kode: Vælg alt

<style  type="text/css">
@media (min-width: 481px) and (max-width: 768px) {
   #banner { width:740px; }
   #banner img { max-width:740px; max-height:222px; }
   #main { width:740px; }           
   #main-content { width:450px; float:left; }
   #widget-container { width:200px; float:right; }
   .widget-content { width:160px; }
}
 
@media (min-width: 321px) and (max-width: 480px) {
   #banner { width:450px; }
   #banner img { max-width:450px; max-height:135px; }
   #main { width:450px; }           
   #main-content { width:400px;}
   #widget-container { width:400px; }
   .widget-content { width:120px; margin:5px; float:left;}
   .widget-text { display:none; }
}
 
@media (max-width: 320px) {
   #banner { width:275px; }
   #banner img { max-width:275px; max-height:83px; }
   #main { width:250px; }           
   #main-content { width:250px;padding:0px;}
   #widget-container { width:250px; padding:0px; }
   .widget-content { width:250px; margin:5px;}
   .widget-text { display:none; }
}
</style>
Som du kan se i dette eksempel så fastholdes attributerne ved det forskellige skærmstørreler, men værdierne ændres alt efter hvilken media størrelse der anvendes.

F.eks er #banner langt breddere på store skærme end på den på 320px

Giver det mening? :)
Top
henrik_t7
Nørd
Nørd
Indlæg:102
Tilmeldt:26. jul 2011, 20:12

Re: CSS3 @media

Indlæg af henrik_t7 » 7. apr 2014, 16:04

Hej.

Tak for svarene .

Hvis jeg har forstået rigtigt så kan man tilpasse sin hjemmeside til brugerens skærm størrelse, hvis bruger har en stor skærm så bruges den store CSS, (max 768px ) og hvis det
er en lille skærm så bruger det den lille CSS regel. osv osv.
På denne mode kan man jo også lave en CSS regl til en mobil tlf. på feks. 4 tommer, kan ikke huske hvad det er i px.
Jeg prøver mig lige frem med forskellige størrelser.

Nu stor der @media (min-width: 481px) and (max-width: 768px), betyder det så at hvis skærm størrelse er mellem disse to tal, så bruger denne regl og hvis den skærm ligger uden for de to tal så bruges en
anden regl, Er der rigtigt.

Henrik :D
Top
henrik_t7
Nørd
Nørd
Indlæg:102
Tilmeldt:26. jul 2011, 20:12

Re: CSS3 @media

Indlæg af henrik_t7 » 5. maj 2014, 22:15

Hej igen.

Jeg har lavet følgene, se kode.

Kode: Vælg alt

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="dcterms.created" content="ma, 05 maj 2014 18:58:55 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title></title>
  <link rel="stylesheet" href="master.css">
    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
<div id="hej">Hej med dig</div>
  </body>
</html>
og her er så css koden.

Kode: Vælg alt

/* Default CSS */
/* Generated by the CoffeeCup HTML Editor - www.coffeecup.com */

body{ }


@media screen and (max-width: 1900px) {

#hej {     width:1500px;
           margin:0px auto;
           height: 100px;
           background:#d5e600;
           font-size:27px; }


}



@media screen and (max-width: 1400px) {

#hej { width:1000px;
           margin:10px auto;
           height: 100px;
           background:red;
           font-size:27px;  }


}



@media screen and (max-width: 900px) {

#hej { width:500px;
           margin:10px auto;
           height: 100px;
           background:green;
           font-size:27px; }


}


@media screen and (max-width: 480px) {

#hej { width:180px;
           margin:10px auto;
           height: 100px;
           background:#FF8040;
           font-size:27px;}


}


@media screen and (max-width: 320px) {

#hej { width:120px;
           margin:1px auto;
           height: 100px;
           background:blue;
           font-size:27px; }


}
jeg har lavet en kasse på min test side og når jeg så gør browser vindue mindre så skifter kassen farve, kun for at se hvornår de forskelige vindues størrelser starter og slutter.
hvad skal man skrive i sit css fil, max - width eller min - width? Kun for at lave en side som tilpasser alle vindue størrelser.

Henrik
Top
Brugeravatar
scootergrisen
Moderator
Moderator
Indlæg:709
Tilmeldt:21. jun 2012, 23:40
Kontakt:
Kontakt scootergrisen

Re: CSS3 @media

Indlæg af scootergrisen » 5. maj 2014, 23:33

Du ka godt gøre sådan der.

Også tilføje en #hej { } uden @media den vil så gælde når dine @media ikke gør. Altså når det er breddere end 1900px.

Du kan også prøve med et HTML element i HEAD delen som her :

Kode: Vælg alt

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
Når du tester det på mobilenheder med små skærme så kan det være zoomet forkert og det kan den kode så hjælpe med.
Top
Besvar

Tilbage til "CSS"