Mobile first CSS
Nu lees ik dat je dat moet doen met CSS media queries. Je begint met een minimale scherm resolutie, en breidt de layout uit met een x-aantal 'breakpoints' van waar de scherm er anders uit kan zien.
Maar hoe doe je dat precies? Wat zijn de gangbare breakpoints voor de verschillende devices zoals smartphone, tablet, laptop, t/m 4k of 8k-scherm? Ik lees dat je dat moet doen met afmetingen in pixels, maar in CSS kan je ook centimeters opgeven, zou dat niet handiger zijn?
En sommigen zeggen dat je beter de verschillende ranges van resoluties geheel kunt scheiden, dat zou makkelijker testen zijn. Heeft iemand daar ervaring mee en/of een mening over? :-)
https://alistapart.com/article/mobile-first-css-is-it-time-for-a-rethink/
https://webdesignerwall.com/tutorials/responsive-design-in-3-steps
En dan in de tijd uitbreiden en aanpassen. Zelf ideeën toevoegen.
En toen had ik niet eens een smartfoon.
Toevoeging op 09/06/2023 09:58:00:
Als je ook responsive videos wilt tonen, is dit handig :
https://stackoverflow.com/questions/14250583/safari-on-ipad-ios6-does-not-scale-html5-video-to-fill-100-of-page-width
Er wordt naar hier verwezen :
https://jsbin.com/ebusok/135/edit?html
Zelf uitbreiden en aanpassen.
Toevoeging op 09/06/2023 10:08:04:
Links om je website voor verschillende apparaten te testen :
http://responsivedesignchecker.com/
https://ui.dev/amiresponsive
Toevoeging op 09/06/2023 12:00:03:
Voorbeeld van een responsive video volgens bovenstaand code.
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<meta name="viewport" content="user-scalable=1, width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0" />
<style>
/* for decoration only */
#player {
border: 0.150em solid black;
box-shadow: 1px 1px 5px black;
margin: 0px;
background-color: black;
}
/* required */
#player {
position: relative;
}
#player img,
#player iframe,
#player embed,
#player object,
#player video,
#player canvas {
top: 0px;
left: 0px;
width: 100%;
max-width: 100%;
height: auto;
}
#player img,
#player iframe,
#player embed,
#player object,
#player video {
height: 100%;
position: absolute;
}
</style>
<style>
/* This style is separate to emphasise the max-width of the player */
#player {
max-width: 870px;
overflow: hidden;
}
</style>
<!-- Sometimes the width and height have to be slightly adjusted to properly resize proportionally -->
</head>
<body>
<div id="player">
<canvas width="500" height="280" ></canvas>
<iframe src="//player.vimeo.com/video/579105618?badge=0" width="500" height="280" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</body>
</html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<meta name="viewport" content="user-scalable=1, width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0" />
<style>
/* for decoration only */
#player {
border: 0.150em solid black;
box-shadow: 1px 1px 5px black;
margin: 0px;
background-color: black;
}
/* required */
#player {
position: relative;
}
#player img,
#player iframe,
#player embed,
#player object,
#player video,
#player canvas {
top: 0px;
left: 0px;
width: 100%;
max-width: 100%;
height: auto;
}
#player img,
#player iframe,
#player embed,
#player object,
#player video {
height: 100%;
position: absolute;
}
</style>
<style>
/* This style is separate to emphasise the max-width of the player */
#player {
max-width: 870px;
overflow: hidden;
}
</style>
<!-- Sometimes the width and height have to be slightly adjusted to properly resize proportionally -->
</head>
<body>
<div id="player">
<canvas width="500" height="280" ></canvas>
<iframe src="//player.vimeo.com/video/579105618?badge=0" width="500" height="280" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</body>
</html>
Gewijzigd op 09/06/2023 09:59:26 door Adoptive Solution
• Diepgang: A Complete Guide to CSS Media Queries
• Lijstjes: Media Queries for Standard Devices
Op zich is het wel duidelijk.
Er zijn geen breakpoints te geven voor alle devices omdat ze allemaal anders zijn.
En CSS afmetingen in centimeters werken niet omdat ze toch weer worden omgerekend naar pixels.
Ik ga voor een responsive GUI met blokken van zo'n 400 pixels. Omdat je bij kleinere schermen niet alle blokken kan laten zien vanwege de schermgrootte ga ik gebruik maken van media queries met niet-overlappende bereiken (voor testen) van schermresoluties. Volgens mij is verticaal scrollen de standaard op alle devices (denk aan scrollwiel van een muis), en horizontaal scrollen is alleen normaal op voornamelijk mobiele devices. Door te werken met verschillende schermbreedtes (0 tot 400, 400 tot 800, 800 tot 1200 en 1200 of hoger) moet je kunnen bepalen welke blokken verborgen worden achter een horizontale swipe.
Ik begrijp dat het mogelijk is om dat voor elkaar te krijgen zonder gebruik van JavaScript. Nu ben ik nog op zoek naar CSS waarmee dat kan. Bijvoorbeeld, je hebt een header, een inhoudsopgave links (met meerdere niveau's) en de inhoud van een pagina. Je kunt dat met CSS grid doen, maar zou dat voor mobiele devices niet beter met CSS flex kunnen?
Op jijBuis zag ik een demo die gebruik maakt van de CSS eigenschap 'scroll-snap-type'. Doen jullie dat ook op zo'n manier?
Nog een video met wat ik bedoel: https://www.youtube.com/watch?v=ytl6TrroGis
Toegegeven, bootstrap heeft zijn nut om allerlei browser verschillen en quircks te mitigeren.
Maar dingen als de volgorde van divjes veranderen is een sigaar uit de doos van CSS, gepresenteerd als iets nieuws.
In de flex of grid-weergavemodus heb je de order eigenschap waarmee je dat supersimpel zonder bootstrap kan doen.
In mijn use-case slaat de balans door naar zelf doen met CSS, omdat mijn webapp alleen een paar desktop browsers hoeft te ondersteunen, en er nu nog geen vraag is om de webapp naar smartphones te tillen. (Voor publieke websites zou ik ook eerder voor bootstrap gaan)
Helaas kom ik niet meteen toe aan de CSS van mijn project, er moeten eerst nog wat andere dingen.
Maar dan kan dit idee nog even rijpen. Ik dank jullie alvast voor de terugkoppeling.
Een klein voorbeeld:
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
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
@mixin tablet {
@media (min-width: 600px) {
@content;
}
}
@mixin desktop {
@media (min-width: 1024px) {
@content;
}
}
@mixin widescreen {
@media (min-width: 1440px) {
@content;
}
}
section {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(2, 1fr);
@include tablet {
grid-template-columns: repeat(4, 1fr);
}
@include desktop {
grid-template-columns: repeat(8, 1fr);
}
@include widescreen {
grid-template-columns: repeat(12, 1fr);
}
}
@media (min-width: 600px) {
@content;
}
}
@mixin desktop {
@media (min-width: 1024px) {
@content;
}
}
@mixin widescreen {
@media (min-width: 1440px) {
@content;
}
}
section {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(2, 1fr);
@include tablet {
grid-template-columns: repeat(4, 1fr);
}
@include desktop {
grid-template-columns: repeat(8, 1fr);
}
@include widescreen {
grid-template-columns: repeat(12, 1fr);
}
}
Uiteraard de breakpoints en de namen van de mediaqueries aanpassen naar eigen smaak, en eventueel eenvoudig uit te breiden met varianten voor retina-schermen.
Gewijzigd op 26/06/2023 20:09:52 door Jan Koehoorn
Mijn intentie is overigens om via JS, evt. vanuit WASM, de browser van stijlinformatie te voorzien.
Ik zie niet meteen hoe SCSS/SASS daar bij past, gezien dat ze CSS-preprocessors zijn.
(Dat is zo'n beetje mijn excuus om niet óók nog SCSS/SASS syntax te onthouden ;-)