Een bruikbare, toegankelijke ervaring is essentieel voor een succesvolle website. Als uw lezers een positieve ervaring hebben, zullen ze eerder een call-to-action uitvoeren, inclusief het kopen van producten. Ze zullen ook eerder terugkeren naar uw site of uw site aanbevelen aan anderen. Ervaring staat centraal.
Mediaquery's bieden verschillende CSS-functies waarmee u uw website kunt aanpassen. Hiermee kunt u de ervaring van elke gebruiker aanpassen op basis van de mogelijkheden van hun apparaat. Leer hoe u uw lezers de beste ervaring kunt geven, of ze nu hun telefoon of een grote desktopmonitor gebruiken.
1. De aanwijzerfunctie
De @mediaregel heeft een aanwijzerfunctie waarmee u uw ontwerp kunt aanpassen op basis van het primaire aanwijsapparaat. U kunt testen op beschikbaarheid en kwaliteit.
deze aanwijzer mediaquery-functie heeft een van de volgende drie waarden: geen, grof of fijn. De geen waarde is van toepassing als er geen aanwijsapparaat is. De ruw waarde is van toepassing wanneer het primaire aanwijsapparaat een verminderde nauwkeurigheid heeft. En de
prima waarde is van toepassing wanneer het primaire aanwijsapparaat een hoge mate van nauwkeurigheid heeft.De aanwijzerfunctie gebruiken
Wijzer
Optie één:
Optie twee
De bovenstaande code genereert twee invoerradio-opties, die variëren op basis van de nauwkeurigheid van het primaire aanwijsapparaat van een computer.
Een computer met een nauwkeurig (of hoogwaardig) primair aanwijsapparaat geeft de volgende webpagina weer:
Een computer met een primair apparaat met beperkte nauwkeurigheid (of lage kwaliteit) geeft de volgende webpagina weer:
Het apparaat met een primair aanwijsapparaat met een beperkte nauwkeurigheid heeft grotere keuzerondjes. Dit geeft een betere gebruikerservaring voor dergelijke gebruikers. Met de aanwijzerfunctie kunt u ervoor zorgen dat al uw gebruikers een prettige ervaring hebben, ongeacht hun apparaat.
2. De Any-pointer-functie
Net als de pointer-functie is de Any-pointer mediaquery-functie gericht op aanwijsapparaten. De functie Any-pointer evalueert echter elk aanwijsapparaat van een computer. De functie om het even welke aanwijzer maakt ook gebruik van de geen, ruw, en prima waarden.
De Any-pointer-functie gebruiken
@media (any-pointer: prima) {
invoer[type="radio"] {
breedte: 15px;
hoogte: 15px;
grensradius: 20px;
grensbreedte: 1px;
}
}
@media (any-pointer: grof) {
invoer[type="radio"] {
breedte: 25px;
hoogte: 25px;
grensradius: 20px;
grensbreedte: 2px;
}
}
U kunt de bovenstaande code eenvoudig vervangen door het mediaquery-gedeelte van de code in het voorbeeld van de aanwijzerfunctie. De bovenstaande code geeft een geschikte weergave weer op basis van de kwaliteit van elk aanwijsapparaat dat een computer kan hebben.
3. De zweeffunctie
De functie voor het aanwijzen van media-query's evalueert of het primaire invoermechanisme van een apparaat in staat is om over de elementen in een gebruikersinterface te zweven.
De zweeffunctie gebruiken
/* CSS */
een{
tekstdecoratie: geen;
de kleur zwart;
}
@media (hover: hover) {
een: zweef {
kleur blauw;
}
}
HTML
Een linkelement
De bovenstaande code zal een. weergeven element. Het verandert van kleur (van zwart naar blauw) wanneer het primaire invoermechanisme van een apparaat (dat zweefbewegingen ondersteunt) erover zweeft.
4. De Any-Hover-functie
De om het even welke-hover mediaquery is gericht op elk invoermechanisme, inclusief het primaire invoermechanisme.
De Any-Hover-functie gebruiken
@media (any-hover: hover) {
een: zweef {
kleur blauw;
}
}
De bovenstaande mediaquery produceert een zweefeffect voor elk invoermechanisme dat in staat is om over een element te zweven.
5. De resolutiefunctie:
De functie voor het opvragen van media met resolutie berekent het aantal pixels dat door een specifiek apparaat wordt weergegeven. Een apparaat dat meer pixels per inch weergeeft, heeft een betere resolutie omdat het afbeeldingen met meer detail weergeeft. Deze functie kan een ontwikkelaar helpen om te beslissen welk apparaat gebruikers elementen in een gebruikersinterface duidelijker kunnen zien.
De resolutiefunctie maakt gebruik van bereik. Dit betekent dat naast het gebruik van de oplossing trefwoord, u kunt gebruiken min-resolutie en maximale resolutie. De functie voor het oplossen van mediaquery's behoort tot het gegevenstype resolutie. Dit betekent dat de resolutiefunctie meetbaar is in een van de drie eenheden: dots per inch (dpi), dots per centimeter (dpcm) of dots per pixels (dppx).
De resolutiefunctie gebruiken
/* CSS */
@media (min-resolutie: 72 dpi) {
P {
kleur wit;
achtergrondkleur: blauw;
}
}
HTML
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
De laagste resolutie die een apparaat kan hebben en nog steeds afbeeldingen van hoge kwaliteit kan weergeven, is 72 dpi. Dus als een apparaat een resolutie van 72 dpi of meer heeft, wordt de volgende uitvoer in de browser weergegeven:
6. De oriëntatiefunctie
Een apparaatviewport kan slechts een van de volgende twee oriëntaties hebben: portret of landschap. Houd er rekening mee dat de oriëntatie van een viewport verschilt van de oriëntatie van een apparaat. Als een apparaat een zacht toetsenbord gebruikt, kan de viewport veranderen van staand naar liggend terwijl het apparaat zelf nog in staande positie staat.
De oriëntatiefunctie gebruiken
/* CSS */
lichaam{
weergave: flexibel;
}
sectie{
rand: 2px effen blauw;
opvulling: 3px;
marge: 3px;
}
@media (oriëntatie: landschap) {
lichaam {
flex-richting: rij;
}
}@media (oriëntatie: portret) {
lichaam {
flex-richting: kolom;
}
}
HTMLLorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum, dolor sit amet consectetur adipisicing elit.
De bovenstaande code verandert de lay-out van een webpagina naar de oriëntatie van een apparaat.
Een apparaat met een viewport in liggende modus geeft de volgende webpagina weer:
Een apparaat met een viewport in portretmodus geeft de volgende webpagina weer:
7. De hoogtefunctie:
Met de functie voor het opvragen van media voor hoogte kunt u CSS-stijlen specificeren op basis van de kijkvensterhoogte van het apparaat van een gebruiker. Deze functie ondersteunt bereik, dus u kunt ook de min-hoogte en maximale hoogte trefwoorden.
De hoogtefunctie gebruiken
/* CSS */
@media (min-hoogte: 360px) {
P{
rand: 2px gestippeld oranjerood;
}}
HTML
Lorem ipsum dolor sit amet consectetur adipisicing elit.
De bovenstaande code past aan wat een gebruiker ziet op basis van de hoogte van zijn apparaat. Gebruikers met een apparaathoogte van 360px en hoger zien iets dat lijkt op de volgende webpagina:
Apparaten met een hoogte van minder dan 360 px geven de rand rond de alinea op de webpagina niet weer.
8. De breedtefunctie:
Met de functie voor het opvragen van media voor de breedte kunt u specifieke CSS-stijlen maken op basis van de kijkvensterbreedte van het apparaat van een gebruiker. Deze functie ondersteunt ook het bereik, dus je hebt de mogelijkheid om de min-breedte en Maximale wijdte trefwoorden.
De breedtefunctie gebruiken
/* CSS */
@media (min-breedte: 600px) {
P{
rand: 2px effen paars;
}
}
HTML
Lorem ipsum dolor sit amet consectetur adipisicing elit.
De bovenstaande code past aan wat een gebruiker ziet op basis van de breedte van zijn apparaat. Gebruikers met een apparaatbreedte van 600px en meer zien zoiets als de volgende webpagina:
Het gebruik van op breedte en hoogte gebaseerde mediaquery's kan een effectieve strategie zijn om uw website responsive maken.
9. De kleurfunctie:
De functie voor het opvragen van kleurmedia evalueert de kleurcomponent van een apparaat (rood, groen, blauw). De waarde verwijst naar het aantal bits dat een beeldscherm voor elk onderdeel gebruikt, wat bepaalt hoeveel verschillende kleuren het kan weergeven. Moderne apparaten gebruiken doorgaans een 24-bits scherm dat acht bits per kleurcomponent gebruikt. Er is ook een geheel getal nodig, waarbij een kleurloos apparaat nul is.
De kleurfunctie maakt ook gebruik van de min-kleur en max-kleur bereiken.
De kleurfunctie gebruiken
/* CSS */
@media (min-kleur: 7) {
P{
rand: 2px effen groen;
}
}
HTML
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Apparaten met een kleurcomponent van zeven en hoger geven de volgende uitvoer weer in hun browser:
Nu kunt u unieke gebruikerservaringen creëren
U zou deze geavanceerde mediaquery's moeten kunnen gebruiken om de ervaring van elke gebruiker die uw website of applicatie bezoekt te verbeteren. Het is belangrijk om mobiele gebruikers en desktopgebruikers een even positieve ervaring op uw site te bieden.
Mediaquery's zijn niet de enige CSS-tools die uw ontwikkelaarsvaardigheden kunnen versterken.
8 essentiële CSS-tips en -trucs die elke ontwikkelaar zou moeten weten
Lees volgende
Gerelateerde onderwerpen
- Programmeren
- CSS
- Webdesign
Over de auteur
Kadeisha Kean is een full-stack softwareontwikkelaar en technisch/technologisch schrijver. Ze heeft het onmiskenbare vermogen om enkele van de meest complexe technologische concepten te vereenvoudigen; materiaal produceren dat gemakkelijk kan worden begrepen door elke nieuwe technologie-beginner. Ze is gepassioneerd door schrijven, interessante software ontwikkelen en de wereld rondreizen (via documentaires).
Abonneer op onze nieuwsbrief
Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!
Klik hier om je te abonneren
