媒体查询
媒体查询可以根据用户设备的尺寸不同而调用不同的样式。它是一种向不同设备提供不同内容的简单而有效的方式,最常用的查询是处理视口高度和宽度的查询。
首先了解一下行内设置
在我们style标签中的media可以设置两个属性,一个是screen[屏幕]、另一个是print[打印机],通过这样的设置针对不同的东西完成对应的css样式设置。
<style media="screen">
h1 {
color: green;
}
</style>
<style media="print">
h1 {
color: yellow;
}
h2 {
display: none;
}
</style>
<h1>aaa</h1>
<h2>bbb</h2>
页面中的显示: screen
打印机的显示:print
通过外部的css引入
在一个公共类的css中通过@important设置引入screen.css和print.css两个文件,在index.html中使用link标签来引入conmon文件: link rel=“stylesheet” href="./css/conmon.css"
- conmon.css
@import url(screen.css) screen;
@import url(print.css) print;
- screen.css
h1 {
color: red;
}
- print.css
h1 {
color: yellowgreen;
}
在style里面设置@media媒体查询
先看@media的简单使用:
<style media="screen">
/* 导航条 */
.navbar {
height: 60px;
width: 900px;
display: flex;
align-items: center;
background-color: #ccc;
margin: 0 auto;
}
.navbar ul {
list-style: none;
display: flex;
}
/* 如果宽度小于600px的时候就执行里面的操作 */
@media screen and (max-width:600px) {
.navbar ul {
display: none;
}
}
</style>
大于600px的时候:保持原来的状态
小于600px的时候:隐藏
关于层级问题
在我们学习媒体查询的时候常常会出现这样的一个问题:最大宽度和最小宽度设置的值相同,那麽这1px是属于谁呢?在这个css里面中,谁在最后,这1px就属于谁。看下面的案例就一幕了然了。
<style media="screen and (min-width:768px)">
h1 {
color: red;
}
</style>
<style media="screen and (max-width:768px)">
h1 {
color: blue;
}
</style>
最终的颜色是属于后者的,显示蓝色。
媒体查询的区间值 and判定
在我们使用媒体查询设置一些样式的时候,在一个范围内不执行该媒体查询,我们在后面可以增加一个and来确定他的区间。比如下面这个案例:
<style media="screen and (min-width:768px) and (max-width:1000px)">
h1 {
color: red;
}
</style>
<style media="screen and (max-width:768px)">
h1 {
color: blue;
}
</style>
在pc端的时候,不执行上面任何一个查询,字体颜色显示黑色
not 关键字的使用
这个not就是我们所谓的不的,也就是程序中的非,非这个条件不用:我们可以这样理解,非薯条不吃,不是薯条我出吃。我们看案例就可以一目了然了。注意这个not 需要放在这个条件前面
<style>
@media not screen and (min-width:500px) and (max-width:768px) {
h1 {
color: red;
}
}
</style>
使用only 关键字排除低端浏览器
使用方式和上述的not一样,我们,就只是把not 换成 only;代码 略~~~