moet ik aparte mediaquery's schrijven voor mobiele apparaten, zowel staand als liggend of negeer het

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Johannes davidian

johannes davidian

03/04/2021 18:28:55
Quote Anchor link
Hallo,

Ik heb een vraag over media query's.

moet ik aparte mediaquery's schrijven voor mobiele apparaten, zowel staand als liggend of negeer het.
voorbeeld :
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
@media  screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait)
 
 {


zou dat verschil maken in de praktijk als ik negeer portriat of landscape?
bedankt
johannes
 
PHP hulp

PHP hulp

28/03/2024 18:49:15
 
- Ariën  -
Beheerder

- Ariën -

04/04/2021 12:01:11
Quote Anchor link
In media-queries is de oriëntation niet verplicht.
 
Johannes davidian

johannes davidian

04/04/2021 13:16:15
Quote Anchor link
dank u wel
johannes
 
Ozzie PHP

Ozzie PHP

04/04/2021 16:07:16
Quote Anchor link
min-device-width moet je niet gebruiken. Gebruik in plaats daarvan min-width. Zelfde voor de hoogte.
 
Johannes davidian

johannes davidian

04/04/2021 17:03:42
Quote Anchor link
dank u wel,
johannes
 
Aad B

Aad B

04/04/2021 21:40:43
Quote Anchor link
Ik heb ooit dit als voorbeeld gekregen. Plak het in een test.html en zie je de effecten als je je browser op je laptop of desktop verkleint. Van telefoon tot groot scherm. Makkelijk een css van te maken
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

.example {
  padding: 20px;
  color: white;
}


 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

body {
    background-color: lightblue;
  }

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

body {
    background-color: blue;
  }

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

body {
    background-color: red;
  }

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

body {
    background-color: green;
  }

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

body {
    background-color: yellow;
  }


</style>
</head>

<body>

<h2>Typical Media Query Breakpoints</h2>
<p class="example">Resize the browser window to see how the background color of this paragraph changes on different screen sizes.</p>


</body>
</html>
Gewijzigd op 04/04/2021 21:43:52 door Aad B
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.