有关CSS中媒体查询的知识点讲解

最新推荐文章于 2024-09-20 14:49:00 发布

Surpass-oneself

最新推荐文章于 2024-09-20 14:49:00 发布

阅读量328

点赞数

分类专栏： CSS Bootstrap

本文链接：https://blog.csdn.net/qq_41882787/article/details/80023031

版权

Bootstrap 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

在有关bootstrap的文章中简单介绍了媒体查询的用法。但是可能很多人还是不太理解所以这里认真说一下。

我们知道我们的PC端口和移动端口的屏幕大小不一致，如何显示一样的效果呢？如果不进行规定和设置，一旦设备的屏幕宽度发生了变化我们的网页也就完全变了样子。布局被打乱。所以我们引入虚拟的浏览器视口就是viewport为啥是虚拟的呢？我们手机不就那么大吗？所谓虚拟就是把手机的浏览器的宽度加大，然后按照规则缩小，是保留样式的缩小的响应式的变化。

一、这里我们先定义一个样式：这是没有进行媒体查询的样式。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>没有任何操作的HTML</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
.container {
width: 1024px;
height: 2000px;
background-color: #f40;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container"></div>
</body>

</html>

二、我们使用媒体查询更改一下，你需要做的是复制下面的代码，运行。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>没有任何操作的HTML</title>
<style>
html,
body {
margin: 0;
padding: 0;
}

.container {

height:1000px;

background-color:#990000;

width: 100%；

}

//如果判断条件式是max-width要从大到小如果是min-width 需要从小到大。一般是宽度判断。就像水平滚动条是很少的。

@media (min-width: 1200px){

.container{

width:1170px;

}

@media (min-width: 992px){

.container{

width:952px;

}

@media (min-width: 768px){

.container{

width:750px;

}

</style>
</head>
<body>
<div class="container"></div>
</body>

</html>

三、哎呦不对啊怎么回事，不是响应式的吗？还能不能做朋友了，给个错的方案。

我们首先要知道浏览器解析的顺序是什么？从上至下解析。@media相当于一个判断语句，满足就执行相应的操作。我们看最后一个条件是什么，width:768px 满足？满足就把前面的覆盖掉，就执行这一个操作就是了。这怎么办？从小到大排列就是了。位置反过来就是了。如果前两条件都满足怎么办比如屏幕宽度是1000px 那就执行992的条件。一行一行解析代码的记住了。后面覆盖前面的。这里的.container是bootstrap的版心样式。还有.container-fluid