Loading Please Wait...
Media queries allow you to apply CSS styles depending on a device's general type (such as print vs. screen) or other characteristics such as screen resolution or browser viewport width.
@media not|only mediatype and (expressions) {
CSS-Code;
}
all: Used for all media type devices.
print: Used for printers.
screen: Used for computer screens, tablets, smart phones, smart watches, laptop, etc.
speech: Used for screen readers that "reads" the page out loud.
Media types define the broad category of device for which the media query applies: all, print, screen. The type is optional (assumed to be all) except when using the not or only logical operators.
/* printers */
@media print {
/* … */
}
/* screens */
@media screen {
/* … */
}
/* screen readers */
@media speech {
/* … */
}
/* all */
@media all {
/* … */
}
/* multiple */
@media screen, print{
/* … */
}
Media features describe a specific characteristic of the user agent, output device, or environment
hover, width (min or max), pointer, color, grid, height, etc.
@media (hover: hover) {
/* … */
}
@media (color) {
/* … */
}
@media (min-width: 200px) {
/* … */
}
@media (min-width: 30em) and (orientation: landscape) {
/* … */
}
@media screen and (min-width: 30em) and (orientation: landscape) {
/* … */
}
@media (min-height: 680px), screen and (orientation: portrait) {
/* … */
}
The not keyword inverts the meaning of an entire media query. It will only negate the specific media query it is applied to.
@media not all and (monochrome) {
/* … */
}
@media not (all and (monochrome)) {
/* … */
}
@media not screen and (color), print and (color) {
/* … */
}
@media (min-width: 30em) and (max-width: 50em) {
/* … */
}
/* The above query can be written as */
@media (30em <= width <= 50em) {
/* … */
}
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved