In this article I will explain what is CSS3 media queries, how its the foundation of responsive web design and it can also be used in JavaScript. I will give an quick overview of all these things.
What is CSS3 Media Queries
Media queries is a way of applying different CSS rules(styles) to elements based on several factors like device size, type, orientation, state, ratio etc. Therefore we can apply different CSS styles to the same HTML markup depending on the factors and this enables us to build responsive web designs.
Using Media Queries
Media queries can be used in four different ways:
- Using media attribute on link element. media attribute will be assigned to the condition for which the external CSS file will be loaded.<link rel="stylesheet" href="style.css" media="logic media and (expression)">
- Using media queries on the @import directive. The file will be loaded if the condition matches.@import url("file") logic media and (expression);
- Using @media rule in an CSS style element or in a external stylesheet. CSS rules are applied if the condition matches.@media logic media and (expression) { rules }
- Media queries can be used in JavaScript. This is helpful to alter computations based on different factors. window.matchMedia() provides this functionality.if (window.matchMedia("logic media and (expression)").matches) {
/* condition matched */
} else {
/* condition didn't match */
}
Components Of Media Query Condition
A media query condition contains 3 basic components: logic, media and expression. Lets see each of them.
Logic
The logic can be “only” or “not” keyword. The “only” keyword prevents older browsers that do not support media queries with media features from applying the given style. So we can say “only” keyword conveys that only apply the CSS rules if the browser supports CSS media queries. The “not” is used apply the CSS rules if the media and expression conditions are not met.
It not compulsory to provide a logic.
Media
Media represents the type of device. The possible values are all, screen, print etc. “screen” represents mobile and computers, “print” presents viewing a document in print preview mode and “all” represents all kinds of devices. Most people just use “all”.
There are many other values available. You have to provide media type.
Expression
Expression represents a list of features to match against the selected media type. The media type and expression is separated by a “and” operator. The features of expression is kept in round brackets “()” and the features are separated by “and” operator. Features come in key value pairs. Some important features are width, height, device-width, device-height, min-width, min-height, min-device-width, min-device-height, max-width, max-height, max-device-width, max-device-height, orientation, aspect-ratio, device-aspect-ratio, resolution etc.
All the features should evaluate to true for the expression to evaluate to true. Therefore if the media type and expression evaluate to true then only the CSS rules are applied.
Height and Width
height and width features can be used to match the height and width exactly to the viewport. device-height and device-width can be used to match the height and width of the device screen. min-height and min-width is used to match the viewport height and width to be greater than equal to the provided value. max-height and max-width is used to match the viewport height and width to be lesser than equal to the provided value.
Orientation
Orientation can be landscape or portrait.
List of mostly used media queries
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) */
@media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) */
@media only screen and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops */
@media only screen and (min-width : 1224px) {
/* Styles */
}
/* Large screens */
@media only screen and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4. Comma can be used to apply same rules to multiple media queries. */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
/*iPhone 6 Portrait*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {
}
/*iPhone 6 landscape*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {
}
/*iPhone 6+ Portrait*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {
}
/*iPhone 6+ landscape*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) {
}
/*iPhone 6 and iPhone 6+ portrait and landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){
}
/*iPhone 6 and iPhone 6+ portrait*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){
}
/*iPhone 6 and iPhone 6+ landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){
}
@narayanprusty
Leave a Reply