Css aanpassen naar gebruikers resolutie
Ik wil op mijn site, meerdere css gebruiken voor de bezoekers,
zo dat het scherm mooi uitgevuld is.
Van bvb 800 width tot 1600 width.
Ik ben hier geen kei in, doe dit voor mijn plezier.
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<!-- responsive web design -->
<meta name="viewport" content="width=device-width">
<link href="./css/px1100.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 1200px)">
<link href="./css/px800.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 1000px)">
<link href="./css/px768.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 799px)">
<link href="./css/px600.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 767px)">
<link href="./css/px480.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 599px)">
<link href="./css/px400.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 479px)">
<link href="./css/px320.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 399px)">
<link href="./css/px240.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 319px)">
<meta name="viewport" content="width=device-width">
<link href="./css/px1100.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 1200px)">
<link href="./css/px800.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 1000px)">
<link href="./css/px768.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 799px)">
<link href="./css/px600.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 767px)">
<link href="./css/px480.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 599px)">
<link href="./css/px400.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 479px)">
<link href="./css/px320.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 399px)">
<link href="./css/px240.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 319px)">
En zo kan je heel wat spelen.
Open de website maar en versmal het venster.
- http://webdesignerwall.com/tutorials/css3-media-queries
- http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
- http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-a-crash-course-in-css-media-queries/
Een voorbeeldje: https://github.com/h5bp/html5-boilerplate/blob/master/css/style.css#L242
Nog een voorbeeldje:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
/* normal styles */
@media screen and (max-width: 900px) {
/* speciale stijlen voor browser met een breedte van 900px of lager
}
@media screen and (max-width: 400px) {
/* voor smartphones bijv. */
}
@media print {
/* speciale print stijlen */
}
@media screen and (max-width: 900px) {
/* speciale stijlen voor browser met een breedte van 900px of lager
}
@media screen and (max-width: 400px) {
/* voor smartphones bijv. */
}
@media print {
/* speciale print stijlen */
}