CSS3自适应及@media媒体查询---kalrry_媒体查询做几套样式的区间-优快云博客

本文详细介绍了CSS3自适应技巧，包括设置meta标签实现手机自适应，并通过媒体查询动态调整移动端和PC端布局。此外，还探讨了不同分辨率下的媒体查询用法，强调了写法顺序的重要性。同时，文章提供了强制性兼容IE浏览器的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS3自适应及@media媒体查询---kalrry

一、CSS3自适应
二、自适应移动端和PC端
- 1.媒体查询动态布局
- 2.强制性兼容
三、CSS3媒体查询
四、参考

一、CSS3自适应

手机自适应允许网页宽度自动调整，需要在前面加一个meta标签：

<meta name="viewport" content="width=device-width，initial-scale=1.0,maximum-scale=3.0,minimum-scale=1.0，user-scalable=no"/>

name=“viewport” 指视口
width=device-width，宽度为视口的宽度
initial-scale=1.0,屏幕分辨率大小
maximum-scale=3.0, 最大比例
minimum-scale=1.0，最小比例
user-scalable=no，禁止用户缩放

meta标签使得网页的宽度等于视口的宽度，网页缩放比例（initial-scale=1）为1，代表页面在视口中按实际尺寸显示，没有任何缩放。

若网页为固定模式布局，要想手机移动端自适应，meta标签可以这样写：

<meta name="viewport" content="width=device-width, maximum-scale=3.0,width=300px,user-scalable=1/0"/>

二、自适应移动端和PC端

1.媒体查询动态布局

 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
 <link rel="stylesheet" media="screen and (min-width:320px) and (max-width:767px)" href="css/320px_768px.css"/>
 <link rel="stylesheet" media="screen and (min-width:768px) and (max-width:1023px)" href="css/768px_1024px.css"/>
 <link rel="stylesheet" media="screen and (min-width:1024px)" href="css/1024px_1360px.css"/>

2.强制性兼容

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

三、CSS3媒体查询

写媒体查询需要注意：主样式在前，媒体查询在后。
媒体查询条件的写法有三种，从小到大，从大到小，还有分辨率分区间查询的写法
采用这两种方式一定一定要注意分辨率的大小顺序!!!

1.分辨率从小到大

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .block{
            height: 2000px;
            border: 1px solid red;
            margin: 0 auto;
        }
       @media all and (min-width: 768px) {
            .block{
                width: 680px;
                background-color: yellow;
            }
        }
        @media all and (min-width: 1024px) {
            .block{
                width: 768px;
                background-color: blue;
            }
        }
        @media all and (min-width: 1580px) {
            .block{
                width: 1190px;
                background-color: red;
            }
        }
    </style>
</head>
<body>
<div class="block"></div>
</body>
</html>

2.分辨率从大到小

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .block{
            height: 2000px;
            border: 1px solid red;
            margin: 0 auto;
        }
        @media all and (max-width: 1580px) {
            .block{
                width: 1190px;
                background-color: red;
            }
        }

        @media all and (max-width: 1024px) {
            .block{
                width: 768px;
                background-color: blue;
            }
        }

        @media all and (max-width: 768px) {
            .block{
                width: 680px;
                background-color: yellow;
            }
        }
    </style>
</head>
<body>
<div class="block"></div>
</body>
</html>

3.分区间查询的写法

	    @media all and (min-width: 768px) and (max-width: 1024px) {
            .block{
                width: 680px;
                background-color: yellow;
            }
        }
        @media all and (min-width: 1024px) and (max-width: 1380px) {
            .block{
                width: 1024px;
                background-color: blue;
            }
        }
        @media all and (min-width: 1580px) {
            .block{
                width: 1190px;
                background-color: red;
            }
        }