mediaquery

Door De Clercq Andy op 09-01-2017 21:55

1.950 views

Hey,
ik ben aan het experimenteren met mediaquery's maar het lukt niet echt.
Als ik onderstaande code gebruik voert hij de achterliggende css steeds uit.
Zowel op mijn groot pc scherm als wanneer ik hem via firefox open in een kleiner venster.
Wel vanop dezelfde pc maar via de webtools kleiner venster simuleren.
Wat zie ik over het hoofd?


<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" type="text/css"
    media="screen and (min-device-width: 1100px)"
    href="breed.css" />
		<title>Testen mediaquery</title>
	</head>
	<body>
		<p class="standaard">Test vieuwport</p>
	</body>

</html>

Ozzie PHP

10-01-2017 00:26

Vervang min-device-width eens door min-width.

Min-DEVICE-width ... het woord zegt het al ... 'device' betekent apparaat. De breedte van jouw computerscherm verandert niet. Ook niet als je de breedte van je browserscherm wijzigt.

Mitch PHP

10-01-2017 08:33 gewijzigd op 10-01-2017 08:34

Zoals Ozzie PHP al reageerde, vervang:

<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 1100px)" href="breed.css" />

Met:

<link rel="stylesheet" type="text/css" media="screen and (min-width: 1100px)" href="css/main.css" />

Maar je kunt ook in 1 stylesheet alle styles zetten en wanneer er andere styling moet worden toegepast gebruik je in datzelfde stylesheet:

@media screen and (max-width: /*max breedte waar deze styles moeten ingaan*/) and (min-width: /*min breedte waar deze styles moeten ingaan*/) {
	/*styling hier*/
}

Min EN max hoeft niet perse, je kunt ook alleen een min width of alleen een max width doen.

Succes !

De Clercq Andy

10-01-2017 19:06

Oké, inderdaad logisch. Dacht dat die tool een andere device simuleerde.
Maar nu werkt het en kan ik er mee verder aan de slag.
Bedankt voor de geboden hulp!

Reageren

Inloggen om te reageren