Please enable JavaScript.
Coggle requires JavaScript to display documents.
Media Query (Syntax (Detail orientation (<link rel="…
Media Query
Syntax
-
-
-
Multiple expressions
<link rel="stylesheet" media="screen and (orientation: portrait) and
(min-width: 800px)" href="800wide-portrait-screen.css" />
separates media query
<link rel="stylesheet" media="screen and (orientation: portrait) and
(min-width: 800px), projection" href="800wide-portrait-screen.css" />
How can use media query
-
CSS stylesheet
media screen and (max-device-width: 400px) {
h1 { color: green }
}
-
import
import url("phone.css") screen and (max-width:360px);
-
Without the CSS3 media query module, we would be unable to target particular CSS
styles at particular device capabilities
-
presentation can be tailored to a specific range of out put devices without changing the content it self
set base styles at the beginning of a stylesheet and the override relevant with media queries further on
it would always be best to start a design
thinking about the mobile/small screen experience and building up from there.
iOS Safari browser automatically draws pages onto a 980 pixel wide canvas and then
squeezes that canvas down to fit the viewport area
iOS and Android browsers allow the use of a specific meta viewport element to override that default canvas shrinking
trick.
With our meta viewport problem fixed, no browsers are now zooming the page,
so we can set about fixing the design for different viewports