PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
?

Mobile first CSS

Door Onbekende gebruiker op 09-06-2023 08:39
3.737 views
Ik wil m'n applicatie geschikt maken voor smartphones, en ga daarvoor de GUI opnieuw opzetten met 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/
A Adoptive Solution
09-06-2023 09:07 gewijzigd op 09-06-2023 09:59
Ik ben er 10 jaar geleden mee begonnen op basis van dit artikel.

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.



[size=xsmall]Toevoeging op 09/06/2023 09:58:00:[/size]

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.

[size=xsmall]Toevoeging op 09/06/2023 10:08:04:[/size]

Links om je website voor verschillende apparaten te testen :

http://responsivedesignchecker.com/

https://ui.dev/amiresponsive



[size=xsmall]Toevoeging op 09/06/2023 12:00:03:[/size]

Voorbeeld van een responsive video volgens bovenstaand code.

<!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>
? Onbekende gebruiker
10-06-2023 15:05 gewijzigd op 10-06-2023 15:25
Dank voor de reacties.

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
Bas Kreleger
12-06-2023 09:15
Heb je al eens gekeken naar iets als Bootstrap 5.2. Dat maakt je leven een stuk makkelijker. Het werkt met een grid van maximaal 12 kolommen. Je gebruikt met Bootstrap een container, of container-fluid voor 100% breedte, een row en daarin kolommen. Waarbij je per breakpoint kunt opgeven hoe groot die kolom moet zijn. Je werkt dan met small devices, medium devices, large devices en xl devices via classes zoals col-md-6 voor een kolom voor medium grootte devices. Ook kun je divjes sorteren, als het op mobiel: 1, 2 is, kun je dit op desktop bijvoorbeeld 2,1 maken via 'order' classes. Erg handig!
? Onbekende gebruiker
23-06-2023 16:24 gewijzigd op 23-06-2023 16:27
Ik ben persoonlijk geen fan van bootstrap. In het verleden heb ik er wel naar gekeken, maar vond het redelijk absurd om allerlei CSS class-namen van derden te moeten onthouden terwijl CSS zelf al omvangrijk genoeg is.
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.
Jan Koehoorn
26-06-2023 19:59 gewijzigd op 26-06-2023 20:09
Als je veel met media-queries gaat werken raad ik aan om SASS/SCSS mixins te gebruiken in combinatie met een task manager zoals bijv Gulp4.

Een klein voorbeeld:


@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);
    }
}


Uiteraard de breakpoints en de namen van de mediaqueries aanpassen naar eigen smaak, en eventueel eenvoudig uit te breiden met varianten voor retina-schermen.
? Onbekende gebruiker
27-06-2023 11:20
Wederom dank.

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 ;-)

Reageren

Inloggen om te reageren