当前位置：网站首页>A brief talk on media inquiry

A brief talk on media inquiry

2022-06-25 05:02:00 【Dai Sensen】

Definition and use
Grammar and usage
attribute
usage
- Media query +rem Implement dynamic size change of elements

Definition and use

1. Use @media Inquire about , You can define different styles for different media types .
[email protected] You can set different styles for different screen sizes , Especially if you need to design responsive pages ,@media It's very useful .
3. When you reset the size of the browser , The page also re renders the page based on the width and height of the browser .

Grammar and usage

@media mediatype and|not|only (media feature) {
CSS-Code;
}

    <style> /*  We fit on the screen and the maximum width 800 Pixels  */ @media screen and (max-width:800px) {
       body {
       background-color: plum; } } @media screen and (max-width:500px) {
       body {
       background-color: pink; } } </style>
</head>

<body>
    <div></div>
</body>

Please add a picture description

attribute

Media type

value	describe
all	For all equipment
print	For printers and print previews
screen	For computer screen , The tablet , Smart phones and so on .
–	–

Media functions

value	describe
min-width	Define the minimum visible area width of the page in the output device .
max-width	Define the maximum visible area width of the page in the output device .
–	–

key word

and, You can connect multiple media features together , Equivalent to and means
not, Exclude a media type , Equivalent to non means , Negligible
only Know specific media types , You can ignore

usage

Media query +rem Implement dynamic size change of elements

rem The unit is to follow html Walking up and down , With rem Page elements can be set in different sizes
Media lookup can change the style according to different device widths
Media query +rem You can achieve different device widths , Realize the dynamic change of page element size

eg：

   * {
            margin: 0;
            padding: 0;
        }
        /*  Order from small to large  */
        
        @media screen and (min-width:320px) {
            html {
                font-size: 50px;
            }
        }
        
        @media screen and (min-width:640px) {
            html {
                font-size: 100px;
            }
        }
        
        .top {
            height: 1rem;
            font-size: .5rem;
            background-color: green;
            color: #fff;
            text-align: center;
            line-height: 1rem;
        }
    </style>
</head>

<body>
    <div class="top"> The shopping cart </div>
</body>