1. Media Inquiry

Media query can make the page achieve different effects under different terminal devices

Media queries automatically identify and load different styles based on the size of the device.

Set meta tag

Use the device's width as the view width and disable initial scaling. <head>Add this meta tag to the tag .

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

Parameter explanation

width = device-width The width is equal to the width of the current device
initial-scale Initial scaling (default is 1.0)
maximum-scale The maximum ratio the user is allowed to zoom to (default is 1.0)
user-scalable Whether the user can manually zoom (default is no)

Achieve different page effects according to different page sizes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            background-color: greenyellow;
        }
        @media screen and (max-width:768px) {
            body{
                background-color: pink;
            }
        }
        @media screen and (min-width:768px) and (max-width:992px){
            body{
                background-color: orange;
            }
        }
        @media screen and (min-width:992px) {
            body{
                background-color: green;
            }
            
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

2. Responsive layout

When it comes to responsive design, media query media is definitely inseparable.

Responsive layout is intended to realize different display methods for browsing web pages on terminals with different screen resolutions.

Advantages and Disadvantages of Responsive Layout

advantage

Strong flexibility when facing devices with different resolutions
Can quickly solve the problem of multi-device display adaptation

shortcoming

Compatible with various devices, heavy workload and low efficiency
The code is cumbersome, hidden and useless elements will appear, and the loading time will be lengthened.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        
        .nav{

Media queries, responsive layout, grid system