5.H5C3 媒体查询

最新推荐文章于 2024-09-20 11:32:47 发布

青春如梦952

最新推荐文章于 2024-09-20 11:32:47 发布

阅读量101

点赞数

分类专栏： H5C3篇文章标签：媒体

本文链接：https://blog.csdn.net/qq_69946766/article/details/132477785

版权

H5C3篇专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.移动端常见的布局

流式布局（百分比布局）
- 流式布局，就是百分比布局，也称非固定像素布局。
- 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
- 流式布局方式是移动web开发使用的比较常见的布局方式。
flex 弹性布局（强烈推荐）
less+rem+媒体查询布局
混合布局

响应式

媒体查询
bootstarp

1.2 布局视口、视觉视口、理想视口

布局视口：在PC端上，布局视口等于浏览器窗口的宽度。而在移动端上，由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里，此时的布局视口会远大于移动设备的屏幕，就会出现滚动条。

视觉视口：用户正在看到的网页的区域

布局视口：的一个理想尺寸，只有当布局视口的尺寸等于设备屏幕的尺寸时，才是理想视口。

1.3 rem （单位）

rem (root em)是一个相对单位，类似于em，em是父元素字体大小。

不同的是rem的基准是相对于html元素的字体大小。

/* 根元素html为10px */
html {
   font-size: 10px;
}
/* .box的宽度大小为200px */       
.box {
    width: 20rem;
}

页面元素的rem值 = 页面元素值（px） / html font-size 字体大小,

当前设计稿是 750px，假如我们把 html 文字大小设置为10px,

里面页面元素rem值：页面元素的px 值 / 10,

2.媒体查询

使用CSS3 @media查询，你可以针对不同的设备类型以及设备的不同特性，定义不同的样式。

2.1 最大宽度max-width

“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时

2.2 最小宽度min-width

“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。

    /* max-width 最大宽度  当前屏幕小于992px会应用当前媒体查询里面的样式 */
        @media screen and (max-width:992px) {
            .box {
                width: 750px;
                height: 400px;
                background-color: skyblue;
            }
        }


        /* 当前屏幕大于768px 应用媒体查询里面的样式 */
        @media screen and (min-width:768px) {
            .box {
                background-color: purple;
            }
        }

2.3媒体查询语法

@media not|only mediatype and (expressions) and（expressions）...{
	CSS-Code;
}

mediatype：设备类型；

expressions：设备特性；

使用 not，and 和 only 等逻辑操作符构建复杂的媒体查询,上面语法中的[ and (设备特性)]可以出现0~N次。

可以对多个设备特性进行匹配。

当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5

@media screen and (min-width:600px) and (max-width:900px){
  body {
      background-color:#f5f5f5;
    }
}

一般把不同的屏幕的可视区域放进相应的css中，当不同的可视区域展示不同的页面

这就是响应式页面

是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。

基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。

常用css适配

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .container {
            width: 1200px;
            height: 400px;
            border: 1px solid red;
            margin: 100px auto;
            display: flex;
            justify-content: space-between;
        }

        .container .content {
            width: 290px;
            height: 400px;
            background-color: pink;
        }

        /* 创建多个媒体查询 */
        /* 当屏幕小于1200px */
        @media screen and (max-width:1200px) {
            .container {
                width: 970px;
            }

            .container .content {
                width: 200px;
            }
        }

        /* 当屏幕小于992 */
        @media screen and (max-width:992px) {
            .container {
                width: 750px;
            }

            .container .content {
                width: 175px;
            }
        }

        /* 当屏幕小于768px */
        @media screen and (max-width:768px) {
            .container {
                width: 100%;
                /* display: flex; */
                flex-wrap: wrap;
            }

            .container .content {
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
        <div class="content">4</div>
    </div>
</body>

</html>

2.4 引入不同的css文件

 <link rel="stylesheet" media="screen and (max-width:1200px)" href="./css/w1200.css">
    <link rel="stylesheet" media="screen and (max-width:992px)" href="./css/w992.css">
    <link rel="stylesheet" media="screen and (max-width:768px)" href="./css/w768.css">

根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。