Media queries inc. Bootstrap
Ik ben momenteel bezig om een website goed responsive te tonen op een Iphone 6. Ik maak gebruik van Bootstrap puur voor het grid systeem. Nu zie ik in de documentatie van Bootstrap het volgende staan:
Quote:
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
Waar is de code voor de XS devices?
Ik gebruik nu zelf de volgende querie voor mijn Iphone, maar zou het graag ook willen optimaliseren voor andere toestellen.
Quote:
@media only screen and (max-width: 500px)
met de volgende code is hij voor de Iphoen 6 geoptimaliseerd, maar op de iphone 5 is hij toch weer net wat anders. Htc one klopt hij wel weer.
met de volgende code is hij voor de Iphoen 6 geoptimaliseerd, maar op de iphone 5 is hij toch weer net wat anders. Htc one klopt hij wel weer.
Wat is wijsheid of standaard om te gebruiken en waarom gaat Bootstrap niet lager dan 576 px?
Alvast bedankt.
Gewijzigd op 06/02/2017 16:26:56 door Jan Graneker
Dat klopt inderdaad, desalniettemin is hier om een omweg voor?
Ik heb hier de omweg gevonden:
Quote:
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}
2 ) Waarom gebruik je Bootstrap als je het toch anders aanpakt? Ik gebruik sws geen bootstrap, ben er totaal geen fan van. En jij gebruikt het alleen voor het grid systeem, en veranderd de media queries ook al. Oftewel je gebruikt 20% van een library, dan is het voor het "preformance" beter om gewoon zelf een lichte css grid systeem te schrijven.
Gewijzigd op 07/02/2017 12:04:49 door Joakim Broden
Ik ben gewent om eerst een desktop first te maken, dit omdat ook gelijk het volledige resultaat aan de klant toonbaar kan worden gemaakt. Dit in tegenstelling tot een mobile first.
Nu begrijp ik dat Bootstrap werkt vanuit een mobile first. Dit betekent dus dat mijn standaard CSS-file gebaseerd is op een mobile device? tot een width van 768PX.
Vervolgens wordt er voor een tablet nieuwe regels aangemaakt in de volgende media querie: 768px.
Voor een laptop wordt het dan 992px
en voor een een desktop 1200px+ Kloppen mijn bevindingen?
Voorts kun je ook desktop-first werken met de media queries al is bootstrap zelf inderdaad mobile-first.
Ik wil zelf nog wel eens deze indeling gebruiken.
Code (php)
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
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
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}
Gewijzigd op 07/02/2017 13:37:48 door Frank Nietbelangrijk
Wat is het verschil tussen de min en max en de volgende regel:
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
of staat XS gelijk aan 320 etc?
@screen-xs-max: 767px
@screen-sm-min: 768px
@screen-sm-max: 992px
etc..
Dan wordt de tweede regel dus:
@media (min-width: 768px) and (max-width: 992px) { ... }
Wat betekend dat de css alleen wordt toegepast indien het venster tussen de 768 en 992 pixels breed is.