CSS Media Queries | Media queries for common device

CSS Media queries allowing content rendering to adapt according to screen resolution or according to browser window size. Media queries are useful for responsive design.

In this tutorial, we see the different kinds of breakpoints and media queries according to responsive technique. Below are the example of media queries.

CSS

@media screen and (min-width : 1000px) and (max-width : 1100px) { ... }

@media screen and (min-width : 768px) and (max-width : 1000px) { ... }

@media screen and (min-width : 320px) and (max-width : 767px) { ... }

@media screen and (min-width : 320px) and (max-width : 500px) { ... }

@media screen and (min-width : 300px) and (max-width : 470px) { ... }

SASS Media Queries Examples

@include media-breakpoint-up(lg){}

@include media-breakpoint-down(md){}

@include media-breakpoint-up(lg){}

@include media-breakpoint-down(md){}

@include media-breakpoint-up(sm){}

@include media-breakpoint-down(sm){}


Media queries may span multiple breakpoint widths:

@include media-breakpoint-only(xs) { ... }

@include media-breakpoint-only(sm) { ... }

@include media-breakpoint-only(md) { ... }

@include media-breakpoint-only(lg) { ... }

@include media-breakpoint-only(xl) { ... }

Targeting the same screen size range would be:
@include media-breakpoint-between(md, xl) { ... }

breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
)

CSS Media Queries for Desktop, Tablet, Mobile devices

How to target desktop, tablet and mobile devices using CSS media queries. Using CSS media queries documents or webpages are presented correct format on different-different sizes of devices.

CSS Media query is used to set the screen size any devices depend upon screen resolution and that enable webpage content to adapt to different screen sizes and resolutions. The device’s screen size can be set by using the @media screen and (min-width) and (max-width) {}. For Tablet styles you can use (max-width: 768px) and for Mobile styles (max-width: 320px).

CSS media queries to specify that certain styles are only applied for the tablet screens and avoided other devices means you want to apply the color of the background for a div in Tablet so you can just target tablet devices only using media type. Media Queries are a feature in CSS3 which allows you to specify certain browser width or device type to apply different sets of CSS rules.

Most commonly, media queries are used to create a page can dynamically change their layout and appearance based on a visitor’s screen size.

CSS media queries allow us to adjust the display and orientation of content at different screen resolutions (e.g. Smartphone screen, Tablet).

CSS media queries allow a browser to apply a color to an element, text size and positive of div only at a certain screen resolution, orientation (landscape or portrait) or size.

Media queries CSS examples and tricks

CSS Media queries to apply different style sheets depend upon the screen, browser, browser version, and orientation (landscape or portrait). It is modified or change your site structure depending on a device’s means in the desktop you want to display a big banner but don’t want to display the same banner in mobile devices due to space, so you can hide that banner using @media screen. Hide any element, change the text color or background color, reduce the font size, change the direction for any elements, want to change the beavers of an element based on screen, devices, and browsers. It is a popular way to make your web pages responsive that can easily adapt any screen devices and your document is presented in a proper format. CSS Media Queries change the beavers of an element using CSS rules based on condition to fit in any device.

In this tutorial we see the different kinds of breakpoints and media queries according to responsive technique.

HTML Media Queries