Example of using @media responsive CSS to adapt to various screens

Example of using @media responsive CSS to adapt to various screens

Definition and Use

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

@media can set different styles for different screen sizes, especially if you need to set up a responsive page design, @media is very useful.

When you resize the browser, the page will be re-rendered according to the browser's width and height.

Width of the PC device screen

When the page width is greater than 1000px (>=1000) and less than 1200px (<=1200), the following CSS is executed (actually, it is executed when it is exactly ">=1000" or "<=1200")

@media screen and (min-width:1000px) and (max-width: 1200px) {
    .cont_li{
        width: 50px;
        margin-left: 7px;
        padding-left: 9px;
    }
}

Pay attention to the following order. If you put @media (min-width: 768px) at the bottom, it will be a tragedy.

@media (min-width: 1200) { //> = 1200 devices}
@media (min-width: 992px) { //> = 992 devices}
@media (min-width: 768px) { //> = 768 devices}

This is because if the screen width is 1440, 1200 will be invalid because 1440>768.

So when using min-width, the smaller one is in front and the larger one is in the back; similarly, if using max-width, the larger one is in front and the smaller one is in the back:

@media (min-width: 768px) { //> = 768 devices}
@media (min-width: 992px) { //> = 992 devices}
@media (min-width: 1200) { //> = 1200 devices}

@media (max-width: 1199){ //<=1199 devices}
@media (max-width: 991px){ //<=991 devices}
@media (max-width: 767px){ //<=768 devices}

PC screen adaptive CSS3 code:

/*Executed when the page width is greater than 1000px and less than 1200px, 1000-1200*/
@media screen and (min-width:1000px) and (max-width: 1200px) {
    body{
        font-size:16px
    }
}
/*Execute when the page width is greater than 1280px and less than 1366px, 1280-1366*/
@media screen and (min-width:1280px) and (max-width: 1366px) {
    body{
        font-size:18px
    }
}
/*Execute when the page width is greater than 1440px and less than 1600px, 1440-1600*/
@media screen and (min-width:1440px) and (max-width:1600px) {
    body{
        font-size:20px
    }
}
/*Execute when the page width is greater than 1680px and less than 1920px, 1680-1920*/
@media screen and (min-width:1680px) and (max-width:1920px) {
    body{
        font-size:22px
    }
}

The example table of computer screen sizes gives several widths: 1024, 1200, 1280, 1366, 1440, 1600, 1680, 1920.

The width of the mobile device screen

rem (font size of the root element) refers to the unit of font size relative to the root element. Simply put, it is a relative unit. When you see rem, you will definitely think of the em unit. em (font size of the element) refers to the unit of font size relative to the parent element. They are actually very similar, except that one calculation rule depends on the root element and the other depends on the parent element.

So to sum up, the so-called root element-dependent calculation method is to first give the html element a font-size, and then all our rems are calculated based on this font-size, for example:

html{ font-size:16px;}

So our 1rem here should be calculated like this: 1x16=16px=1rem;

Mobile fonts:

@media screen and (min-width: 320px) {html{font-size:50px;}}
@media screen and (min-width: 360px) {html{font-size:56.25px;}}
@media screen and (min-width: 375px) {html{font-size:58.59375px;}}
@media screen and (min-width: 400px) {html{font-size:62.5px;}}
@media screen and (min-width: 414px) {html{font-size:64.6875px;}}
@media screen and (min-width: 440px) {html{font-size:68.75px;}}
@media screen and (min-width: 480px) {html{font-size:75px;}}
@media screen and (min-width: 520px) {html{font-size:81.25px;}}
@media screen and (min-width: 560px) {html{font-size:87.5px;}}
@media screen and (min-width: 600px) {html{font-size:93.75px;}}
@media screen and (min-width: 640px) {html{font-size:100px;}}
@media screen and (min-width: 680px) {html{font-size:106.25px;}}
@media screen and (min-width: 720px) {html{font-size:112.5px;}}
@media screen and (min-width: 760px) {html{font-size:118.75px;}}
@media screen and (min-width: 800px) {html{font-size:125px;}}
@media screen and (min-width: 960px) {html{font-size:150px;}}

Mobile screen adaptive CSS3 code:

@media screen and (min-width:320px) and (max-width:360px) {
    body{
        font-size: 12px;
    }
}
@media screen and (min-width:360px) and (max-width:390px) {
    body{
        font-size: 13px;
    }
}
@media screen and (min-width:390px) and (max-width:460px) {
    body{
        font-size: 14px;
    }
}

@media screen and (min-width:320px) and (max-width:460px) {
    body{
        font-size: 12.5px;
    }
}

This concludes this article about examples of how to use @media responsive CSS to adapt to various screens. For more relevant @media responsive screen adaptation content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!

<<:  Detailed explanation of VUE responsiveness principle

>>:  Tomcat multi-instance deployment and configuration principles

Recommend

How to create Baidu dead link file

There are two types of dead link formats defined b...

A brief discussion on DDL and DML in MySQL

Table of contents Preface 1. DDL 1.1 Database Ope...

How to sort a row or column in mysql

method: By desc: Neither can be achieved: Method ...

Detailed explanation of Docker Swarm concepts and usage

Docker Swarm is a container cluster management se...

Detailed explanation of JavaScript Reduce

Table of contents map filter some every findIndex...

How to build a new image based on an existing image in Docker

Building new images from existing images is done ...

TypeScript enumeration basics and examples

Table of contents Preface What are enums in TypeS...

How to display JSON data in HTML

background: Sometimes we need to display json dat...

This article will help you thoroughly understand the specific use of cgroup in Docker

Table of contents What is cgroup Composition of c...

The vue configuration file automatically generates routing and menu instance code

Table of contents Written in front router.json Ro...

React Native reports "Cannot initialize a parameter of type'NSArray＜id＜RCTBridgeModule＞＞" error (solution)

Recently, when running an old RN project, the fol...

Pure CSS implementation of radio and checkbox effect example

radio-and-checkbox Pure CSS to achieve radio and ...

A brief discussion of several browser compatibility issues encountered

background Solving browser compatibility issues i...

Examples of simple add, delete, modify, and query operations using mysql statements

This article uses examples to describe how to use...

Vue simple implementation of turntable lottery

This article shares the specific code of Vue to s...