时间戳

首页 > 解决方案 > @media 查询不起作用

html - @media 查询不起作用

问题描述

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

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 查询的许多变体。

标签： htmlcssmedia-queries

解决方案

第一列类选择器未关闭。这是正确的代码

.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;
  }
}

希望它再次有帮助

推荐阅读