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?
Henrik
CSS3 @media
- scootergrisen
- Moderator
- Indlæg:709
- Tilmeldt:21. jun 2012, 23:40
- Kontakt:
Re: CSS3 @media
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.
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.
Re: CSS3 @media
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:
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?
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>
F.eks er #banner langt breddere på store skærme end på den på 320px
Giver det mening?
Re: CSS3 @media
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
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
Re: CSS3 @media
Hej igen.
Jeg har lavet følgene, se kode.
og her er så css koden.
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
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>
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; }
}
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
- scootergrisen
- Moderator
- Indlæg:709
- Tilmeldt:21. jun 2012, 23:40
- Kontakt:
Re: CSS3 @media
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 :
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.
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">