Wat is het verschil tussen screenen only screenin mediaquery’s?
<link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />
Waarom zijn we verplicht om only screente gebruiken? Biedt screenzelf niet voldoende informatie om alleenvoor het scherm te worden weergegeven?
Ik heb veel responsieve websites gezien die een van deze drie verschillende manieren gebruikten:
@media screen and (max-width:632px)
@media (max-width:632px)
@media only screen and (max-width:632px)
Antwoord 1, autoriteit 100%
Laten we uw voorbeelden een voor een opsplitsen.
@media (max-width:632px)
Deze zegt voor een venster met een max-widthvan 632px dat je deze stijlen wilt toepassen. Met dat formaat zou je in de meeste gevallen praten over iets dat kleiner is dan een desktopscherm.
@media screen and (max-width:632px)
Deze zegt dat voor een apparaat met een screenen een venster met max-widthvan 632px de stijl wordt toegepast. Dit is bijna identiek aan het bovenstaande, behalve dat u screenopgeeft in plaats van de andere beschikbare mediade meest voorkomende andere is print.
@media only screen and (max-width:632px)
Hier is een citaat rechtstreeks van W3C om dit uit te leggen.
Het trefwoord ‘only’ kan ook worden gebruikt om stylesheets te verbergen voor oudere user agents. User agents moeten mediaquery’s die beginnen met ‘only’ verwerken alsof het ‘only’ zoekwoord niet aanwezig was.
Aangezien er niet zo’n mediatype als “alleen” bestaat, moet het stijlblad door oudere browsers worden genegeerd.
Hier is de link naar dat citaatdat wordt getoond in voorbeeld 9 op die pagina.
Hopelijk werpt dit enig licht op mediaquery’s.
BEWERKEN:
Bekijk @hybrids uitstekend antwoordover hoe het onlyzoekwoord werkelijk is afgehandeld.
Antwoord 2, autoriteit 43%
Het volgende is afkomstig van Adobe-documenten.
De specificatie voor mediaquery’s bevat ook het trefwoord only, dat bedoeld is om mediaquery’s voor oudere browsers te verbergen. Net als notmoet het trefwoord aan het begin van de aangifte komen. Bijvoorbeeld:
media="only screen and (min-width: 401px) and (max-width: 600px)"
Browsers die mediaquery’s niet herkennen, verwachten een door komma’s gescheiden lijst van mediatypen, en de specificatie zegt dat ze moetenelke waarde onmiddellijk vóór het eerste niet-alfanumerieke teken dat geen koppelteken is, afkappen. Dus een oude browser zouhet voorgaande voorbeeld als volgt moeten interpreteren:
media="only"
Omdat er geen mediatype is als alleen, wordt de stylesheet genegeerd. Op dezelfde manier moet een oude browser zou
. interpreteren
media="screen and (min-width: 401px) and (max-width: 600px)"
als
media="screen"
Met andere woorden, het zou de stijlregels moeten toepassen op alle schermapparaten, ook al weet het niet wat de mediaquery’s betekenen.
Helaas kon IE 6–8 de specificatie niet correct implementeren.
In plaats van de stijlen toe te passen op alle schermapparaten, negeert het de stylesheet helemaal.
Ondanks dit gedrag wordt het nog steeds aanbevolen om mediaquery’s alleen vooraf te laten gaan als u de stijlen wilt verbergen voor andere, minder gebruikelijke browsers.
Dus, met
media="only screen and (min-width: 401px)"
en
media="screen and (min-width: 401px)"
heeft hetzelfde effect in IE6-8: beide voorkomen dat die stijlen worden gebruikt. Ze worden echter nog steeds gedownload.
Ook in browsers die CSS3-media-query’s ondersteunen, zullen beide versies de stijlen laden als de viewportbreedte groter is dan 401pxen het mediatype is scherm.
Ik ben niet helemaal zeker van welke browsers die geen CSS3-media-query’s ondersteunen, de onlyversie
nodig hebben
media="only screen and (min-width: 401px)"
in tegenstelling tot
media="screen and (min-width: 401px)"
Om ervoor te zorgen dat deze niet is geïnterpreteerd als
media="screen"
Het zou een goede test zijn voor iemand met toegang tot een apparaatlab.
Antwoord 3, Autoriteit 7%
Om te stijl voor veel smartphones met kleinere schermen, kunt u schrijven:
@media screen and (max-width:480px) { … }
Om oudere browsers te blokkeren om een iPhone- of Android-telefoonstijl te zien, kunt u schrijven:
@media only screen and (max-width: 480px;) { … }
Lees dit artikel voor meer http: //webdesign.At .com / OD / CSS3 / A / CSS3-media-queries.htm
Antwoord 4, Autoriteit 3%
Het antwoord van @Hybrid is vrij informatief, behalve dat het het doel niet verklaart zoals vermeld door @ashitaka “Wat als u de Mobile First-aanpak gebruikt? Dus, we hebben eerst de mobiele CSS en gebruik dan min-breedte Target grotere sites. We moeten het enige trefwoord niet gebruiken in die context, toch? “
Wil hier toevoegen dat het doel eenvoudigweg is om te voorkomen dat niet-ondersteunende browsers die andere apparaatstijl gebruiken alsof het begint vanaf “scherm” zonder dat het als een scherm wordt beschouwd, terwijl als het begint met “alleen” stijl zal genegeerd worden.
Antwoord op Ashitaka, overweeg dit voorbeeld
<link rel="stylesheet" type="text/css"
href="android.css" media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css"
href="desktop.css" media="screen and (min-width: 481px)" />
Als we niet “alleen” gebruiken, zal het nog steeds werken, aangezien desktop-stijl ook opvallende Android-stijlen zal gebruiken, maar met onnodige overhead. In dit geval, ALS een browser geen ondersteuning biedt, zal deze terugvallen op de tweede stylesheet en de eerste negeren.
Antwoord 5
@media screen and (max-width:480px) { … }
screenhier is om de schermgrootte van de mediaquery in te stellen. De maximale breedte van het weergavegebied is bijvoorbeeld 480px. Het specificeert dus het scherm in tegenstelling tot de andere beschikbare mediatypes.
@media only screen and (max-width: 480px;) { … }
only screenhier wordt gebruikt om te voorkomen dat oudere browsers die geen mediaquery’s met mediafuncties ondersteunen, de opgegeven stijlen toepassen.