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

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

js implements custom drop-down box

How does the composite index of MySQL take effect?

An example of how Vue implements four-level navigation and verification code

HTML Basics Must-Read - Comprehensive Understanding of CSS Style Sheets

A simple method to be compatible with IE6's min-width and min-height

Detailed explanation of Vue's TodoList case

Thirty HTML coding guidelines for beginners

Vue component to realize carousel animation

How to install vim editor in Linux (Ubuntu 18.04)

Recommend

CSS implements the function of hiding the search box (animation forward and reverse sequence)

MySQL 8.0.23 installation super detailed tutorial

CSS realizes the layout method of fixed left and adaptive right

Solution to garbled display of Linux SecureCRT

Basic steps to use Mysql SSH tunnel connection

Discussion on the browsing design method of web page content

Multiple ways to insert SVG into HTML pages

Detailed explanation of the role of overflow:hidden (overflow hiding, clearing floats, solving margin collapse)

Super simple implementation of Docker to build a personal blog system

Recommend some useful learning materials for newbies in web design

Implement 24+ array methods in JavaScript by hand

How to safely shut down a MySQL instance

Docker container time zone error issue

The meaning and usage of linux cd

Use Python to connect to MySQL database using the pymysql module