@media 查询不起作用

Question

几周来我一直在寻找解决方案，尝试了相同几行代码的不同变体，这是当前的解决方案，它不起作用。

HTML 文件:

<link type="text/css" rel="stylesheet" href="public/stylesheet.css">

<meta name="viewport" content="width=device-width">

外部链接 CSS 文件：

.column{
background-color: #FFF;

padding-top: 0%;
padding-bottom: 10%;
 margin-top: 1.2%;
/*margin-bottom: 2%; */
margin-left: 37.5%;
margin-right: 2%;

width:25%;
text-align: center;
padding-bottom: 0%;

display: inline-block;


/* scalable HTML CSS*/
  
@media (min-width: 700px) {
.column {
background-color: #FFF;

padding-top: 0%;
padding-bottom: 10%;
 margin-top: 1.2%;
/*margin-bottom: 2%; */
margin-left: 1%;
margin-right: 1%;

width:98%;
text-align: center;
padding-bottom: 0%;

display: inline-block;
  }
}

无论出于何种原因，无论我对代码进行何种更改，div 列都不会增长到 100% 宽度。我已经检查了我的元标记，它在那里，我已经尝试使用内部 CSS，以及我的元标记和我能找到的@media 查询的尽可能多的变体。

Answer 1

你在哪里 link src 文件尝试给 ./ 就像下面的那个

<link rel="stylesheet" href="./public/styles.css">

如果这不起作用，请尝试在媒体查询中使用最大宽度而不是最小宽度。

编辑：尝试将宽度设为 100% 而不是 98%

Answer 2

第一列 class 选择器不是 closed.Here 的正确代码

.column{
background-color: #FFF;

padding-top: 0%;
padding-bottom: 10%;
 margin-top: 1.2%;
/*margin-bottom: 2%; */
margin-left: 37.5%;
margin-right: 2%;

width:25%;
text-align: center;
padding-bottom: 0%;

display: inline-block;
}

/* scalable HTML CSS*/
  
@media (min-width: 700px) {
.column {
background-color: #FFF;

padding-top: 0%;
padding-bottom: 10%;
 margin-top: 1.2%;
/*margin-bottom: 2%; */
margin-left: 1%;
margin-right: 1%;

width:98%;
text-align: center;
padding-bottom: 0%;

display: inline-block;
  }
}

希望再次对您有所帮助

Answer 3

您忘记添加 } 了！在这里，我修正了那个错误。

.column {
    background-color: #fff;
    padding-top: 0%;
    padding-bottom: 10%;
    margin-top: 1.2%;
    /*margin-bottom: 2%; */
    margin-left: 37.5%;
    margin-right: 2%;
    width: 25%;
    text-align: center;
    padding-bottom: 0%;
    display: inline-block;
}

/* scalable HTML CSS*/

@media (min-width: 700px) {
    .column {
        background-color: #fff;

        padding-top: 0%;
        padding-bottom: 10%;
        margin-top: 1.2%;
        /*margin-bottom: 2%; */
        margin-left: 1%;
        margin-right: 1%;

        width: 98%;
        text-align: center;
        padding-bottom: 0%;

        display: inline-block;
    }
}

@media 查询不起作用

@media Query not functioning

html

css

media-queries