Css @媒体查询未生效
这是我第一次使用css媒体查询。现在我正在寻找移动设备的媒体查询。我首先要对一部240x320的手机进行媒体查询。因此，我已按如下方式开始媒体查询：Css @媒体查询未生效,css,Css,这是我第一次使用css媒体查询。现在我正在寻找移动设备的媒体查询。我首先要对一部240x320的手机进行媒体查询。因此，我已按如下方式开始媒体查询： @media only screen and (max-width:240px){ } 从link开始，我相信这句话的逻辑应该成立。i、 e.当浏览器窗口等于或小于240px时，其中的css应启动。因为某种原因，虽然这没有发生？以下是我的完整css： @media only screen and (max-width:240px){
@media only screen and (max-width:240px){
}
@media only screen and (max-width:240px){
.inputbox
{
width: 64%;
border: 1px solid black;
border-bottom-right-radius: 2em;
border-top-right-radius: 2em;
/*box-shadow: inset 0px 2px 2px #ececec;*/
display: inline;
padding: 0.55%;
font-size: 100%;
margin-top: 0px;
margin-bottom: 1%;
}
.labelbox
{
border: 1px solid black;
border-bottom-left-radius:2em;
border-top-left-radius: 2em;
padding: 0.55%;;
display: block;
background: #e9f939; /* Old browsers */
padding-right: 7px;
color:black;
float:left;
width:30%;
font-size: 100%;
text-align: center;
}
}
.inputbox
{
width: 80%;
border: 1px solid black;
border-bottom-right-radius: 2em;
border-top-right-radius: 2em;
/*box-shadow: inset 0px 2px 2px #ececec;*/
display: inline;
padding: 0.55%;
font-size: 100%;
margin-top: 0px;
margin-bottom: 1%;
}
.labelbox
{
border: 1px solid black;
border-bottom-left-radius:2em;
border-top-left-radius: 2em;
padding: 0.55%;;
display: block;
background: #e9f939; /* Old browsers */
padding-right: 7px;
color:black;
float:left;
width:17.5%;
font-size: 100%;
text-align: center;
}
关于我要破坏的内容有什么想法吗？问题是，在媒体查询之后定义了正常（非240px）样式，因此它们覆盖了查询中的样式。颠倒顺序，你会没事的。（媒体查询不会影响CSS的特殊性。）问题在于，在媒体查询之后定义了常规（非240px）样式，因此它们会覆盖查询中的样式。颠倒顺序，你会没事的。（媒体查询不会影响CSS的特殊性。）问题在于，在媒体查询之后定义了常规（非240px）样式，因此它们会覆盖查询中的样式。颠倒顺序，你会没事的。（媒体查询不会影响CSS的特殊性。）问题在于，在媒体查询之后定义了常规（非240px）样式，因此它们会覆盖查询中的样式。颠倒顺序，你会没事的。（媒体查询不会影响CSS的特殊性。）问题： 如果没有通过媒体查询在css标记上定义条件，则任何css标记都会接受其样式的最后声明…因此，当您定义媒体查询时，它会运行，但因为在该查询之后…定义了一个通用样式，该通用样式会覆盖您的媒体查询样式 解决方案： 将媒体查询切换到最后一个，并将通用css置于其上方：
问题： 如果没有通过媒体查询在css标记上定义条件，则任何css标记都会接受其样式的最后声明…因此，当您定义媒体查询时，它会运行，但因为在该查询之后…定义了一个通用样式，该通用样式会覆盖您的媒体查询样式 解决方案： 将媒体查询切换到最后一个，并将通用css置于其上方：
问题： 如果没有通过媒体查询在css标记上定义条件，则任何css标记都会接受其样式的最后声明…因此，当您定义媒体查询时，它会运行，但因为在该查询之后…定义了一个通用样式，该通用样式会覆盖您的媒体查询样式 解决方案： 将媒体查询切换到最后一个，并将通用css置于其上方：
问题： 如果没有通过媒体查询在css标记上定义条件，则任何css标记都会接受其样式的最后声明…因此，当您定义媒体查询时，它会运行，但因为在该查询之后…定义了一个通用样式，该通用样式会覆盖您的媒体查询样式 解决方案： 将媒体查询切换到最后一个，并将通用css置于其上方：
您是否有类似于以下内容的元标记？看起来不错，您是否在媒体查询外部为媒体查询内部的这些类声明了任何其他样式，如果是，请在媒体查询之前添加它并添加元标记您是否有类似于以下内容的元标记？看起来不错，您是否为媒体查询中的类声明了媒体查询之外的任何其他样式，如果是，请在媒体查询之前添加它并添加元标记您是否有类似于以下内容的元标记在您的头脑中
/* generic css first */
.inputbox {
width: 80%;
border: 1px solid red;
border-bottom-right-radius: 2em;
border-top-right-radius: 2em;
/*box-shadow: inset 0px 2px 2px #ececec;*/
display: inline;
padding: 0.55%;
font-size: 100%;
margin-top: 0px;
margin-bottom: 1%;
}
.labelbox {
border: 1px solid black;
border-bottom-left-radius:2em;
border-top-left-radius: 2em;
padding: 0.55%;
;
display: block;
background: #e9f939;
/* Old browsers */
padding-right: 7px;
color:black;
float:left;
width:17.5%;
font-size: 100%;
text-align: center;
}
/* media-query below the generic */
@media only screen and (max-width : 240px) {
.inputbox {
width: 64%;
border: 1px solid black;
border-bottom-right-radius: 2em;
border-top-right-radius: 2em;
/*box-shadow: inset 0px 2px 2px #ececec;*/
display: inline;
padding: 0.55%;
font-size: 100%;
margin-top: 0px;
margin-bottom: 1%;
}
.labelbox {
border: 1px solid black;
border-bottom-left-radius:2em;
border-top-left-radius: 2em;
padding: 0.55%;
;
display: block;
background: #e9f939;
/* Old browsers */
padding-right: 7px;
color:black;
float:left;
width:30%;
font-size: 100%;
text-align: center;
}
}