CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Media Queries for Responsiveness

Media queries are simple filters that can be applied to CSS styles. They make it easy to change styles based on the characteristics of the device rendering the content, including the display type, width, height, orientation, and even resolution.


Apply media queries based on viewport size

Media queries enable us to create a responsive experience where specific styles are applied to small screens, large screens, and anywhere in between. The media query syntax allows for the creation of rules that can be applied depending on device characteristics.

@media (query) {
  /* CSS Rules used when query matches */
}

While there are several different items we can query on:

min-width Rules applied for any browser width greater than the value defined in the query
max-width Rules applied for any browser width less than the value defined in the query
min-height Rules applied for any browser height greater than the value defined in the query
max-height Rules applied for any browser height less than the value defined in the query
orientation=portrait Rules applied for any browser where the height is greater than or equal to the width
orientation=landscape Rules for any browser where the width is greater than the height

In the following example when the width of the viewport is 768 pixels or greater, the background-color will be "lightgreen":

Run code

How to choose breakpoints

Don't define breakpoints based on device classes. Defining breakpoints based on specific devices, products, brand names, or operating systems that are in use today can result in a maintenance nightmare. Instead, the content itself should determine how the layout adjusts to its container.

  • Create breakpoints based on content, never on specific devices, products, or brands.
  • Design for the smallest mobile device first; then progressively enhance the experience as more screen real estate becomes available.
  • Keep lines of text to a maximum of around 70 or 80 characters.

Design the content to fit on a small screen size first, then expand the screen until a breakpoint becomes necessary. This allows you to optimize breakpoints based on content and maintain the least number of breakpoints possible.

Let's work through the example we saw in the last chapter:

Run code

Note that the webpage in the example adjust itself when you resize the browser window.


Adding another breakpoint

You can add as many breakpoints as you like.

CSS
HTML
Run code

Common Media Query Breakpoints

There are many screens and devices with different heights and widths, so it is hard to create an exact breakpoint for each device. To keep things simple you could target five groups:

Run code

Hide Elements With Media Queries

The following example shows how to hide an element when the browser's width is 600px wide or down:

I will be hidden when the browser's width is 600px wide or down:
Run Code

Optimize text for reading

You can use media queries to change the font size of an element on different screen sizes:

Example DIV
Run Code