Media queries can be used to check many things, such as:
Using media queries are a popular technique for delivering a different style sheet to desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones).
@media not|only mediatype and (expressions) {
CSS-Code;
}
Media query start with the @media rule. After that we have logical operator(not, only). Finally we need to specify the media type and the keyword and followed by an expression within parenthesis.
The logical operators not, and, and only can be used to compose a complex media query. You can also combine multiple media queries into a single rule by separating them with commas.
You can use the following logical operator -
and The and operator is used for combining multiple media features together into a single media query, requiring each chained feature to return true in order for the query to be true. It is also used for joining media features with media types.not The not operator is used to negate a media query, returning true if the query would otherwise return false. If present in a comma-separated list of queries, it will only negate the specific query to which it is applied. If you use the not operator, you must also specify a media type. The not keyword can't be used to negate an individual media feature expression, only an entire media query.only The only operator is used to apply a style only if an entire query matches, and is useful for preventing older browsers from applying selected styles. If you use the only operator, you must also specify a media type., Commas are used to combine multiple media queries into a single rule. Each query in a comma-separated list is treated separately from the others. Thus, if any of the queries in a list is true, the entire media statement returns true. In other words, lists behave like a logical or operator.Media types describe the general category of a device. When using the not or only logical operators, the media type is optional and the all type will be implied. You can use the following media type -
all Suitable for all devices.print Intended for paged material and documents viewed on a screen in print preview mode. (Please see paged media for information about formatting issues that are specific to these formats.)screen Intended primarily for screens.speech Intended for speech synthesizers.Media features describe specific characteristics of the user agent, output device, or environment. Media feature expressions test for their presence or value, and are entirely optional. Each media feature expression must be surrounded by parentheses. There are lots of option for media feature and the followings are very popular -
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
// or
@media only screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
In the above example, we have two condition, one is the targeting device is screen and another is the min-width must be higher than 480px.
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
// or
@media only screen and (max-width: 600px) {
body {
background-color: olive;
}
}
On screens that are 600px or less, set the background color to olive.
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
In the above example, the CSS will be applied if the targeting media type is screen and the orientation is landscape.
@media screen and (max-width: 900px) and (min-width: 600px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
We have three condition here, one the media type is screen, width must be less than 900px and width must be higher than 600px.
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
When the width is between 600px and 900px OR above 1100px - change the appearance of <div>
media AttributeYou can also use the same media query syntax to load different CSS file depending on the conditions.
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
For example -
<link rel="stylesheet" media="screen and (max-width: 600px)" href="mobile.css">
The mobile.css file will be loaded if the screen width is less than 600px.
The viewport is the user's visible area of a web page.
The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen. Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size. Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen. This was not perfect!! But a quick fix.
HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag. You should include the following <meta> viewport element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.