damnsharp
Terugkerende gebruiker
- Lid geworden
- 6 jan 2012
- Berichten
- 1.414
Goedemiddag, ik ben aan het uitzoeken hoeveel media queries ik het beste bij responsive webdesign websites zal gebruiken. Het moeten er niet te veel worden maar ik wil wel zorgen dat de website op zoveel mogelijk apparaten werkt.
Mijn idee is de volgende te gebruiken (die meen ik ook Twitter bootstrap framework gebruikt):
<!-- Algemene stylesheet-->
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
<!-- Desktops and laptops -->
<link rel="stylesheet" type="text/css" media="only screen and (min-width:1200px)" href="responsive1200.css" />
<!-- Small desktop screens and laptops -->
<link rel="stylesheet" type="text/css" media="only screen and (min-width:1024px) and (max-width:1199px)" href="responsive1024.css" />
<!-- iPad landscape -->
<link rel="stylesheet" type="text/css" media="only screen and (min-width:768px) and (max-width:1024px) and (orientation : landscape)" href="responsive768landscape.css" />
<!-- iPad portrait -->
<link rel="stylesheet" type="text/css" media="only screen and (min-width:768px) and (max-width:1024px) and (orientation : portrait)" href="responsive768portrait.css" />
<!-- iPhone landscape -->
<link rel="stylesheet" type="text/css" media="only screen and (min-width:568px) and (max-width:767px)" href="responsive568.css" />
<!-- Android portrait - Iphone 4 landscape -->
<link rel="stylesheet" type="text/css" media="only screen and (min-width:480px) and (max-width:567px)" href="responsive480.css" />
<!-- Iphone 4/5 portrait -->
<link rel="stylesheet" type="text/css" media="only screen and (min-width:320px) and (max-width:479px)" href="responsive320.css" />
Maar, kan het korter of zo laten, wat vinden jullie ervan?
Mijn idee is de volgende te gebruiken (die meen ik ook Twitter bootstrap framework gebruikt):
<!-- Algemene stylesheet-->
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
<!-- Desktops and laptops -->
<link rel="stylesheet" type="text/css" media="only screen and (min-width:1200px)" href="responsive1200.css" />
<!-- Small desktop screens and laptops -->
<link rel="stylesheet" type="text/css" media="only screen and (min-width:1024px) and (max-width:1199px)" href="responsive1024.css" />
<!-- iPad landscape -->
<link rel="stylesheet" type="text/css" media="only screen and (min-width:768px) and (max-width:1024px) and (orientation : landscape)" href="responsive768landscape.css" />
<!-- iPad portrait -->
<link rel="stylesheet" type="text/css" media="only screen and (min-width:768px) and (max-width:1024px) and (orientation : portrait)" href="responsive768portrait.css" />
<!-- iPhone landscape -->
<link rel="stylesheet" type="text/css" media="only screen and (min-width:568px) and (max-width:767px)" href="responsive568.css" />
<!-- Android portrait - Iphone 4 landscape -->
<link rel="stylesheet" type="text/css" media="only screen and (min-width:480px) and (max-width:567px)" href="responsive480.css" />
<!-- Iphone 4/5 portrait -->
<link rel="stylesheet" type="text/css" media="only screen and (min-width:320px) and (max-width:479px)" href="responsive320.css" />
Maar, kan het korter of zo laten, wat vinden jullie ervan?
Laatst bewerkt:
