CSS voor mobiel
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
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
/* On screens that are 600px wide or less. iPhone7 Nokia Lumia */
@media screen and (max-width: 600px) {
#content {
position:top;
left: 0px;
height:1450px;
width:600px;
font-size:40px;
}
#header {
position:relative;
left: 0px;
height:100px;
width:100%;
font-size:40px;
text-align: center;
}
#grafiek {
position:relative;
width: 100%;
height:600px;
float:left;
font-size: 40px;
}
@media screen and (max-width: 600px) {
#content {
position:top;
left: 0px;
height:1450px;
width:600px;
font-size:40px;
}
#header {
position:relative;
left: 0px;
height:100px;
width:100%;
font-size:40px;
text-align: center;
}
#grafiek {
position:relative;
width: 100%;
height:600px;
float:left;
font-size: 40px;
}
Gewijzigd op 14/01/2020 14:00:14 door Aad B
Ik wil wel proberen te kijken, maar wat is de bijbehorende html code?
het kan ook misschien helpen als je de width niet op 100% zet, maar 100vw (= % van viewport width)
Toevoeging op 14/01/2020 23:31:06:
Volgens mij ontbreekt in je head deel de volgende meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Als ik in je CSS file kijk dan zou ik overwegen om:
- de css vanuit het kleinste apparaat op te zetten, en niet vanuit het grootste
- let op, als je een waarde bijvoorbeeld bij media <992px hebt gedefinieerd is die in principe ook geldig voor <600px. Daarom moet je alles wat je aan de browser over wil laten en niet vast wil leggen bij <600px weer op "initial" zetten. Als je andersom werkt, is dat handiger.
- veel van de "position" en "height" tags te verwijderen tenzij je ergens een specifiek doel mee hebt. Op mobiel wil je toch over het algemeen alleen vertikaal scrollen, omdat de breedte beperkt is wil je de hoogte laten bepalen door de inhoud.
- normaal neemt het onderliggende item waarden over van het bovenliggende. Je hebt een mooie container met #content. De font-size die je daar in vult wordt in de onderliggende block-en over genomen.
- een font-size van 40px lijkt me wat groot.
Ik heb wat dingen aangepast en dan krijg ik denk ik het resultaat dat je wil:
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
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
/* On screens that are 600px wide or less. iPhone7 Nokia Lumia */
@media screen and (max-width: 600px) {
#content {
position:initial;
left: initial;
height:initial;
width:100vw;
font-size:40px;
}
#header {
position:initial;
left: initial;
height:initial;
width:initial;
font-size:initial;
text-align: center;
}
#grafiek {
position:initial;
width: initial;
height:initial;
float:initial;
font-size: initial;
}
@media screen and (max-width: 600px) {
#content {
position:initial;
left: initial;
height:initial;
width:100vw;
font-size:40px;
}
#header {
position:initial;
left: initial;
height:initial;
width:initial;
font-size:initial;
text-align: center;
}
#grafiek {
position:initial;
width: initial;
height:initial;
float:initial;
font-size: initial;
}
Zoals aangegeven, kan je bij een omgekeerde opbouw alle regels met "initial" (terug naar fabriekswaarde/standaard browser instelling) verwijderen.
Succes
Gewijzigd op 15/01/2020 20:40:44 door j opla
Toevoeging op 15/01/2020 20:45:21:
Als je de "Developmenttools" of ontwikkelaarshulpmiddelen gebruikt in Firefox, kun je goed zien wat er gebeurd als je bepaalde instellingen aan past. Wel is het handig als de testpagina statisch zou zijn (nu worden de aanpassingen elke paar minuten weer overschreven).
Toevoeging op 15/01/2020 20:58:11:
PS. Ik zie dat je in je html ook nog opmaak hebt staan, zoals die zou ik er zoveel mogelijk uit slopen, dat maakt het alleen maar onoverzichtelijker. En inline style opmaak (dus in de html) overschrijft de opmaak die je in je .css file zet.
Toevoeging op 15/01/2020 21:12:38:
PPS bij het omdraaien van de CSS opbouw moet je in je media query ook omdraaien, voor schermen van < 600px heb je dan geen query, de volgende stap wordt:
Code (php)
1
@media screen and (min-width: 600px) {
Gewijzigd op 15/01/2020 21:13:08 door j opla