文章介绍了如何在VisualStudioCode(VSCode)中使用CSS媒体查询进行页面样式定义。通过示例解释了`@media`规则，特别是`onlyscreenand(max-width:1000px)`和`(min-width:600px)`如何根据屏幕宽度改变背景色。当定义不同宽度范围的样式时，更具体的条件（如较大的宽度限制）应置于最后，以确保正确的样式覆盖。
首先，我们要用到的软件是Visual Studio Code
媒体查询有个默认样式 就是在VS Code里边定义<style></style>,在这个标签里边定义，例如：
运行结果：
这段代码中 分别表示的意思如下:
only:只有； screen媒体设备； and连接符；max-width:媒体属性
运行结果： 
分析：首先默认的是蓝色，我设置的是最大是1000px,假如说 我最大值是960，但是960是小于1000的 所以运行的结果是粉色；运行红色是因为 小于600px
注意：
/* @media only screen and (max-width:1000px) {
body {
background-color: pink;
}
} */
/**如果这些代码在600px的下边 那么红色将被覆盖 只会显示蓝色 粉色**/
/*
@media only screen and (min-width:600px) {
body {
background-color: red;
}
}
@media only screen and (min-width:1000px) {
body {
background-color: pink;
}
} */
/**如果是最小宽度 大的数字要放在下边**/
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
