Posts in current category

Responsive Web Design - Media Queries


May 04, 2021 00:00 CSS


Table of contents


Responsive Web Design - Media Queries


Media queries are described on CSS3: CSS3 @media queries.

Using @media query, you can define different styles for different media types.

If the browser window is less than 500px, the background turns light blue:

@media only screen and (max-width: 500px) {
body { background-color: lightblue; }}

Try it out . . .

Add a break point

In previous tutorials we used rows and columns to create web pages that were responsive, but not friendly on the small screen.

Media queries can help us solve this problem. We can add break points in the middle of the design, and different break points have different effects.

Desktop devices

Responsive Web Design - Media Queries

Mobile phone device

Responsive Web Design - Media Queries

Use media queries to add break points at 768px:

When the screen (browser window) is less than 768px, the width of each column is 100%:

/* For desktop: */
.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }
@media only screen and (max-width: 768px) { /* For mobile phones: */
[class*="col-"] { width: 100%; }}

Try it out . . .

Design for mobile priority

Mobile first means that mobile design is preferred when designing desktops and other devices.

That means we have to make some changes to CSS.

We make style changes when the screen is less than 768px, and we also need to modify styles when the screen width is greater than 768px. Here are the mobile-first instances:

/?Designed for mobile:
[class*="col-"] { width: 100%; }
@media only screen and (min-width: 768px) { /* For desktop: */
.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }}

Other break points

You can add break points to your needs.

We can also set break points for tablet and mobile devices.

Desktop devices

Responsive Web Design - Media Queries

Tablet device

Responsive Web Design - Media Queries

Mobile phone device

Responsive Web Design - Media Queries

Add a media query when the screen is 600px and set a new style (screen greater than 600px but less than 768px):

Note that the two sets of class styles are the same, but have different names (col- and col-m-):

/* For mobile phones: */
[class*="col-"] { width: 100%; }
@media only screen and (min-width: 600px) { /* For tablets: */
.col-m-1 { width: 8.33%; }
.col-m-2 { width: 16.66%; }
.col-m-3 { width: 25%; }
.col-m-4 { width: 33.33%; }
.col-m-5 { width: 41.66%; }
.col-m-6 { width: 50%; }
.col-m-7 { width: 58.33%; }
.col-m-8 { width: 66.66%; }
.col-m-9 { width: 75%; }
.col-m-10 { width: 83.33%; }
.col-m-11 { width: 91.66%; }
.col-m-12 { width: 100%; }}
@media only screen and (min-width: 768px) { /* For desktop: */
.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; } }

Try it out . . .

The above code looks a lot, but it's still necessary because he can automatically set different styles depending on the screen size.

HTML instance

For desktop devices:

The first and third parts span 3 columns. The middle part spans 6 columns across domains.

For tablet devices:

The first spans 3 columns, the second part spans 9 columns, and the third part spans 12 columns:

< div class= "row" >
< div class= "col-3 col-m-3" > ... < /div >
< div class= "col-6 col-m-9" > ... < /div >
< div class= "col-3 col-m-12" > ... < /div >
< /div >

Direction: horizontal/vertical

Combined with CSS media queries, you can create layouts that fit the orientation of different devices (horizontal landscape, vertical portrait, and so on).

Grammar:

orientation´╝Üportrait | landscape

  • Portrait: Specifies that the height of the page visible area in the output device is greater than or equal to the width
  • Landscape: All but portrait values are landscape

If the horizontal background will be light blue:

@media only screen and (orientation: landscape) {
body { background-color: lightblue; }}

Try it out . . .