【CSS3手机自适应及媒体查询】

最新推荐文章于 2023-06-06 00:28:06 发布

Lxq~

最新推荐文章于 2023-06-06 00:28:06 发布

阅读量543

点赞数

本文链接：https://blog.csdn.net/qq_42872073/article/details/84899708

版权

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

<meta name="viewport" content="width=device-width, initial-scale=1"/>

例如：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title></title>
    <style>
        .block{
            width: 300px;
            height: 300px;
            background-color: yellow;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="block"></div>
</body>
</html>

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

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

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

☆网站自适应移动端和PC端
媒体查询动态布局：

 <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"/>

☆强制性兼容

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

content=“IE=edge,chrome=1”：用IE浏览器的兼容模式，默认为谷歌的内核。当然只需要这一句话是远远不够的，还需要写兼容性样式。

☆CSS3媒体查询
写媒体查询需要注意：主样式在前，媒体查询在后。
媒体查询条件的写法有两种，从小到大一种，从大到小一种。
分辨率从小到大：

<!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>

分辨率从大到小：

<!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>

采用这两种方式一定一定要注意分辨率的大小顺序!!!
还有一种是将分辨率分区间查询：

	    @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;
            }
        }