Menu
What is the difference between these two instructions?
@media screen and (max-device-width: 480px) {}
and
@media only screen and (max-device-width: 480px) {}
910
Media queries in CSS3 extended the CSS2 media types idea: Instead of looking for a type of device, they look at the capability of the device. Media queries can be used to check many things, such as: width and height of the viewport. width and height of the device.
Media Types in CSS: There are many types of media types which are listed below: all: It is used for all media devices. print: It is used for printer. screen: It is used for computer screens, smartphones, etc.
Media queries are commonly associated with CSS, but they can be used in HTML and JavaScript as well. There are a few ways we can use media queries directly in HTML.
You can also have more than one breakpoint for CSS selectors. You might add on additional media queries to continue changing the h1 size as the viewport increases to 62em (992px) and 87em (1392px) wide. You can create as many breakpoints as you would like, and you can use any width that you would like.
The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
From http://www.w3.org/TR/css3-mediaqueries/
In real use scenarios, the only screen query is used to target specific mobile browsers that support modern CSS.
From http://www.alistapart.com/articles/return-of-the-mobile-stylesheet
Even more clearly
Prefixing a media queries with the "only" keyword will cause non CSS3-compliant browsers to ignore the rule.
From http://www.html5rocks.com/en/mobile/mobifying.html
118
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
