使用媒体查询时css的修改

使用媒体查询修改某一特定元素的css时，是在原来的css样式上进行特定修改其他不变，还是直接忽略原有css,对某一特定元素的css进行重写

源自：响应式布局 2-1 媒体查询的语法-1

收起

1回答

好帮手慕小李回答被采纳获得+3积分 2023-04-04 09:51:00

同学你好，解答如下：

媒体查询是指针对某屏幕宽度内、某区间内的屏幕宽度、某屏幕宽度以外它们的是互相不影响的。

如

小于648px的宽度

如649px 到 920px

如大于921px以外的屏幕宽度

上述例子中它们之中设置的css是互不影响的，比如在以上三个宽度中如需要设置header都需要单独设置重写。

祝学习愉快！

TKXZ 提问者 #1

老师您的意思是当不使用媒体查询时css样式如果是.box{width:300px;color:red;},当使用@media all and (min-width：200px){.box{width:100px}},此时的color：red在媒体查询生效时不可用，需要在媒体查询中再设置，如：@media all and (min-width：200px){.box{width:100px color：red}}

2023-04-04 10:08:23
好帮手慕小李回复提问者 TKXZ #2

对。
<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
  .box {
  width: 300px;
  background-color: red;
  height: 200px;
}
  /* 当屏幕最小宽度是600px时 */
  @media all and (min-width:600px){
  .box{
  width:100px;
  background-color: green;
}
}
  </style>
  </head>
  <body>
  <div class="box"></div>
  </body>
</html>

2023-04-04 10:18:07
TKXZ 提问者回复好帮手慕小李 #3

height:200px在≥600px时仍然生效？

2023-04-04 10:40:35