min-width is niet nodig.

Origineel gepost door Sten van D

min-width is niet nodig.

U werkt dan enkel met " max-width " ? Bedankt voor de opmerking !

Ja bijvoorbeeld:
@media only screen and (max-width: 1139px) {}
@media only screen and (max-width: 1023px) {}
@media only screen and (max-width: 768px) {}
@media only screen and (max-width: 480px) {}

Even kleine edit: het is niet zo dat min-width niet werkt of dat je het nooit gebruikt, maar in jouw voorbeeld is het niet nodig

Origineel gepost door Sten van D

Ja bijvoorbeeld:
@media only screen and (max-width: 1139px) {}
@media only screen and (max-width: 1023px) {}
@media only screen and (max-width: 768px) {}
@media only screen and (max-width: 480px) {}

Gebruikt u altijd dezelfde resoluties ? Of afhankelijk van design ?

Meestal gebruik ik dit bovenstaande als start, als dat niet genoeg blijkt te zijn kun je ook specifiekere opties toevoegen. Ik had ook nog een edit gemaakt bij mijn vorige post welke wellicht wat meer info geeft.

Origineel gepost door Sten van D

Meestal gebruik ik dit bovenstaande als start, als dat niet genoeg blijkt te zijn kun je ook specifiekere opties toevoegen. Ik had ook nog een edit gemaakt bij mijn vorige post welke wellicht wat meer info geeft.

Bedankt voor de tips !
Om het coderen overzichtelijker te houden dacht ik bijvoorbeeld het onderstaande te gebruiken :

Code:

<link href="css/responsive/stylesheet_a.css" rel="stylesheet" type="text/css" media="(max-device-width: 1139px)" />

Ik heb de indruk dat deze stylesheets niet zonder refresh aangepast worden na het draaien van mijn tablet?
Wat ik wel werkende heb in mijn stylesheets is bijvoorbeeld :

Code:

@media only screen and (max-width: 1139px) { body { background:red; } }

Maar dat wordt snel heel onoverzichtelijk ... hoe lossen jullie dat op ?
Bij mij staat alles momenteel in één grote responsive css ... lijkt me niet ideaal te zijn ?

Ik heb ook altijd alle CSS in 1 document staan, maar ik heb meestal ook niet heel veel afwijkende statements voor de responsive versie.