Question

所以我首先从Mobile Version编写CSS代码。之后我将其修改为更大的屏幕。当我使用较大的屏幕时，它会影响较小的屏幕视图，即使我已经为较小的屏幕视图设置了值。

CSS结构：

.m-dwSeotSecondSection__featureGroup {
    text-align: center;
    width: 80%;
    margin: 4em 0 4em 0;
}

@media only screen and (min-width:800px){

        .m-dwSeotSecondSection__featureGroup {
    width: 22.5%; } 
}

HTML结构：

<div class= "m-dwSeotSecondSection__fgContainer">
                <div class="m-dwSeotSecondSection__featureGroup -seo">
                    <div class="a-dwSeotSecondSection__icon -seo">
                    </div>
                    <div class="a-dwSeotHeading -heightdefined">
                    </div>
                    <p class="a-dwSeotDesc">
                    </p>
                </div>
    </div>

Answer 1

我不确定您是否要默认为初始样式。如果是这样，那么这可能会起作用：

.m-dwSeotSecondSection__featureGroup {
text-align: center;
width: 80%;
margin: 4em 0 4em 0;
border: 1px solid black
}

@media only screen and (min-width:800px) {
  .m-dwSeotSecondSection__featureGroup {
  width: auto;
  margin: auto;
  border: 1px solid black
  }
}

Answer 2

CSS看起来很好，如果您有以下行，请查看您的HTML主管部分：

<meta name="viewport" content="width=device-width, initial-scale=1" />

Answer 3

我认为媒体查询可以帮助您

如果你想在某个特定的屏幕上影响给定的css，那么就像这样给出媒体查询

@media only screen (min-width: 767px) and (max-width: 1200px){
    .class{
         property: value;
    }
}

现在这个css只会影响宽度大于767px且宽度小于1200px的设备。所以它不会对其他风格产生影响

Answer 4

@Anuresh和@ vuskovic09回答了这个问题我忘了添加

CSS Media Query，不会读取第一个代码

4 个答案: