Question

我正在尝试让用户评论在我的网站上响应，以便在全宽度三显示，平板电脑尺寸为2和移动设备。我已将链接附加到网站，以便您可以更好地理解我的意思：http://www.bfi-film-festival.com/movie.php?id=269

.cmt {
float: left;
width: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin: 15px 0;
}

.cmt_inr {
width: 100% !important;
float: left;
margin: 2%;
min-height: 100px;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-box-flex: 1;
flex: 1;
position: relative;
padding-bottom: 80px;
}

@media only screen and (max-width: 480px)
.cmt_inr {
width: 100%;
}
@media only screen and (max-width: 768px)
.cmt_inr {
width: 50%;
}

我使用的@ media屏幕似乎无法正常工作，我不知道为什么。

Answer 1

@ media-tag

缺少“{}”

@media screen and (max-width: 768px) "{"
"}"

试试看结果：

@media screen and (max-width: 768px) {
   .cmt_inr {
        background-color: red;
        width: 50%;
    }
}

@media screen and (max-width: 480px) {
    .cmt_inr {
        background-color: blue;
        width: 20%;
    }
}

“！important”会覆盖witdth，所以尽量避免使用它，或者也为@ media-tag中的宽度设置！important。

如何在我的网站上发表评论？

1 个答案: