无法更改媒体查询

Posted 2023-03-06

技术标签:

【中文标题】无法更改媒体查询【英文标题】：Unable to Change media queries 【发布时间】：2021-09-22 15:01:13 【问题描述】：

我正在创建一个存储用户数据的项目...

我使用了表格格式，我想为所有设备（移动设备、标签、笔记本电脑）保持相同的布局。我不想要移动和标签布局（响应性）。

对于所有查看器，它应该是笔记本电脑/PC 类型的布局（移动和标签查看器也可以）

你的帮助对我有很大帮助...

* 
  margin: 0;
  padding: 0;
  box-sizing: border-box


body,
html 
  height: 100%;
  font-family: sans-serif


a 
  margin: 0;
  transition: all .4s;
  -webkit-transition: all .4s;
  -o-transition: all .4s;
  -moz-transition: all .4s


a:focus 
  outline: 0 !important


a:hover 
  text-decoration: none


h1,
h2,
h3,
h4,
h5,
h6 
  margin: 0


p 
  margin: 0


li,
ul 
  margin: 0;
  list-style-type: none


input 
  display: block;
  outline: 0;
  border: none !important


textarea 
  display: block;
  outline: 0


input:focus,
textarea:focus 
  border-color: transparent !important


button 
  outline: 0 !important;
  border: none;
  background: 0 0


button:hover 
  cursor: pointer


iframe 
  border: none !important


.limiter 
  width: 100%;
  margin: 0 auto


.container-table100 
  width: 100%;
  min-height: 100vh;
  background: #c4d3f6;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 33px 30px


.wrap-table100 
  width: 960px;
  border-radius: 10px;
  overflow: hidden


.table 
  width: 100%;
  display: table;
  margin: 0


@media screen and (max-width:768px) 
  .table 
    display: block
  


.row 
  display: table-row;
  background: #fff


.row.header 
  color: #fff;
  background: #6c7ae0


@media screen and (max-width:768px) 
  .row 
    display: block
  
  .row.header 
    padding: 0;
    height: 0
  
  .row.header .cell 
    display: none
  
  .row .cell:before 
    font-family: Poppins, sans-serif !important;
    font-weight: 700 !important;
    font-size: 12px;
    color: grey;
    line-height: 1.2;
    text-transform: uppercase;
    font-weight: unset !important;
    margin-bottom: 13px;
    content: attr(data-title);
    min-width: 98px;
    display: block
  


.cell 
  display: table-cell


@media screen and (max-width:768px) 
  .cell 
    display: block
  


.row .cell 
  font-family: Poppins, sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px;
  color: #666;
  line-height: 1.2;
  font-weight: unset !important;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f2f2f2


.row.header .cell 
  font-family: Poppins, sans-serif !important;
  font-weight: 400 !important;
  font-size: 18px;
  color: #fff;
  line-height: 1.2;
  font-weight: unset !important;
  padding-top: 19px;
  padding-bottom: 19px


.row .cell:nth-child(1) 
  width: 240px;
  padding-left: 40px


.row .cell:nth-child(2) 
  width: 240px;
  padding-left: 20px


.row .cell:nth-child(3) 
  width: 240px;
  padding-left: 20px


.row .cell:nth-child(4) 
  width: 240px;
  padding-left: 0


.row,
.table 
  width: 100% !important


.row:hover 
  background-color: #ececff;
  cursor: pointer


@media (max-width:768px) 
  .row 
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: 18px;
    padding-top: 30px;
    padding-right: 15px;
    margin: 0
  
  .row .cell 
    border: none;
    padding-left: 30px;
    padding-top: 16px;
    padding-bottom: 16px
  
  .row .cell:nth-child(1) 
    padding-left: 30px
  
  .row .cell 
    font-family: Poppins, sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px;
    color: #555;
    line-height: 1.2;
    font-weight: unset !important
  
  .cell,
  .row,
  .table 
    width: 100% !important

<div class=limiter>
  <div class=container-table100>
    <div class=wrap-table100>
      <div class=table id=adi45>
        <div class="row header">
          <div class="cell hd">Full Name</div>
          <div class="cell hd">Email Address</div>
          <div class="cell hd">Username</div>
          <div class="cell hd">Password</div>
        </div>
        <div class=row>
          <div class=cell data-title="Full Name">Joseph Smith</div>
          <div class=cell data-title=Age>27</div>
          <div class=cell data-title="Job Title">Project Manager</div>
          <div class=cell data-title=Location>Somerville, MA</div>
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

我不明白这个问题。是什么阻止您更改媒体查询？如果您希望 sll 视口大小的布局完全相同，为什么要使用媒体查询？如果一切都以相对术语（例如％）定义，那么您应该为所有人获得相同的布局。或许您可以更详细地描述问题所在？ 【参考方案1】：

要求无论视口尺寸如何，布局看起来都一样。

但是 CSS 包含几个媒体查询，这些查询将布局更改为块而不是窄设备上的类似表格的布局。

如果所有人都需要相同的布局，我不知道为什么会有这些，所以这个 sn-p 作为第一步删除了媒体查询。

* 
  margin: 0;
  padding: 0;
  box-sizing: border-box


body,
html 
  height: 100%;
  font-family: sans-serif


a 
  margin: 0;
  transition: all .4s;
  -webkit-transition: all .4s;
  -o-transition: all .4s;
  -moz-transition: all .4s


a:focus 
  outline: 0 !important


a:hover 
  text-decoration: none


h1,
h2,
h3,
h4,
h5,
h6 
  margin: 0


p 
  margin: 0


li,
ul 
  margin: 0;
  list-style-type: none


input 
  display: block;
  outline: 0;
  border: none !important


textarea 
  display: block;
  outline: 0


input:focus,
textarea:focus 
  border-color: transparent !important


button 
  outline: 0 !important;
  border: none;
  background: 0 0


button:hover 
  cursor: pointer


iframe 
  border: none !important


.limiter 
  width: 100%;
  margin: 0 auto


.container-table100 
  width: 100%;
  min-height: 100vh;
  background: #c4d3f6;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 33px 30px


.wrap-table100 
  width: 960px;
  border-radius: 10px;
  overflow: hidden


.table 
  width: 100%;
  display: table;
  margin: 0


.row 
  display: table-row;
  background: #fff


.row.header 
  color: #fff;
  background: #6c7ae0


.cell 
  display: table-cell


.row .cell 
  font-family: Poppins, sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px;
  color: #666;
  line-height: 1.2;
  font-weight: unset !important;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f2f2f2


.row.header .cell 
  font-family: Poppins, sans-serif !important;
  font-weight: 400 !important;
  font-size: 18px;
  color: #fff;
  line-height: 1.2;
  font-weight: unset !important;
  padding-top: 19px;
  padding-bottom: 19px


.row .cell:nth-child(1) 
  width: 240px;
  padding-left: 40px


.row .cell:nth-child(2) 
  width: 240px;
  padding-left: 20px


.row .cell:nth-child(3) 
  width: 240px;
  padding-left: 20px


.row .cell:nth-child(4) 
  width: 240px;
  padding-left: 0


.row,
.table 
  width: 100% !important


.row:hover 
  background-color: #ececff;
  cursor: pointer

<div class=limiter>
  <div class=container-table100>
    <div class=wrap-table100>
      <div class=table id=adi45>
        <div class="row header">
          <div class="cell hd">Full Name</div>
          <div class="cell hd">Email Address</div>
          <div class="cell hd">Username</div>
          <div class="cell hd">Password</div>
        </div>
        <div class=row>
          <div class=cell data-title="Full Name">Joseph Smith</div>
          <div class=cell data-title=Age>27</div>
          <div class=cell data-title="Job Title">Project Manager</div>
          <div class=cell data-title=Location>Somerville, MA</div>
        </div>
      </div>
    </div>
  </div>
</div>

幸运的是，CSS 中剩余的几乎所有内容都以相对单位 (%) 定义，因此所有视口大小都显示为一个表格。然而，在最窄的设备上，并非所有表格的宽度都适合 - 虽然单词被包裹，但这仅在整个单词上完成，因此右侧有一些溢出。例如：

* 
  margin: 0;
  padding: 0;
  box-sizing: border-box


body,
html 
  height: 100%;
  font-family: sans-serif


a 
  margin: 0;
  transition: all .4s;
  -webkit-transition: all .4s;
  -o-transition: all .4s;
  -moz-transition: all .4s


a:focus 
  outline: 0 !important


a:hover 
  text-decoration: none


h1,
h2,
h3,
h4,
h5,
h6 
  margin: 0


p 
  margin: 0


li,
ul 
  margin: 0;
  list-style-type: none


input 
  display: block;
  outline: 0;
  border: none !important


textarea 
  display: block;
  outline: 0


input:focus,
textarea:focus 
  border-color: transparent !important


button 
  outline: 0 !important;
  border: none;
  background: 0 0


button:hover 
  cursor: pointer


iframe 
  border: none !important


.limiter 
  width: 100%;
  margin: 0 auto


.container-table100 
  width: 100%;
  min-height: 100vh;
  background: #c4d3f6;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 33px 30px


.wrap-table100 
  width: 960px;
  border-radius: 10px;
  overflow: hidden


.table 
  width: 100%;
  display: table;
  margin: 0


.row 
  display: table-row;
  background: #fff


.row.header 
  color: #fff;
  background: #6c7ae0


.cell 
  display: table-cell


.row .cell 
  font-family: Poppins, sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px;
  color: #666;
  line-height: 1.2;
  font-weight: unset !important;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f2f2f2


.row.header .cell 
  font-family: Poppins, sans-serif !important;
  font-weight: 400 !important;
  font-size: 18px;
  color: #fff;
  line-height: 1.2;
  font-weight: unset !important;
  padding-top: 19px;
  padding-bottom: 19px


.row .cell:nth-child(1) 
  width: 240px;
  padding-left: 40px


.row .cell:nth-child(2) 
  width: 240px;
  padding-left: 20px


.row .cell:nth-child(3) 
  width: 240px;
  padding-left: 20px


.row .cell:nth-child(4) 
  width: 240px;
  padding-left: 0


.row,
.table 
  width: 100% !important


.row:hover 
  background-color: #ececff;
  cursor: pointer

<div class=limiter>
  <div class=container-table100>
    <div class=wrap-table100>
      <div class=table id=adi45>
        <div class="row header">
          <div class="cell hd">Full Name</div>
          <div class="cell hd">Email Address</div>
          <div class="cell hd">Username</div>
          <div class="cell hd">Password</div>
        </div>
        <div class=row>
          <div class=cell data-title="Full Name">Joseph Smith</div>
          <div class=cell data-title=Age>27</div>
          <div class=cell data-title="Job Title">Project Manager</div>
          <div class=cell data-title=Location>Somerville, MA</div>
        </div>
      </div>
    </div>
  </div>
</div>

例如，在宽度为 360 像素的设备上，最终结果如下：

如果我们将单词连字以使其适合，它可能不会对用户有所帮助 - 尽管这是一种选择。另一种选择是意识到虽然 CSS 中的大多数单位都是相对于视口大小的，但字体大小的定义不是，所以字太大而无法水平放置。

我们可以做的一件事是使字体大小相对于视口宽度，以便一切都适合。这可能意味着在非常大的屏幕上，尺寸可能会变得太大。这是你自己决定的事情。您可以使用 CSS min 函数来限制字体大小。这个 sn-p 设置相对于视口宽度但不超过 10px 的字体大小。然后相对于该设置实际尺寸 - 例如18px 变成 1.8em（所以很容易看到转化）。

* 
  margin: 0;
  padding: 0;
  box-sizing: border-box


body,
html 
  height: 100%;
  font-family: sans-serif


a 
  margin: 0;
  transition: all .4s;
  -webkit-transition: all .4s;
  -o-transition: all .4s;
  -moz-transition: all .4s


a:focus 
  outline: 0 !important


a:hover 
  text-decoration: none


h1,
h2,
h3,
h4,
h5,
h6 
  margin: 0


p 
  margin: 0


li,
ul 
  margin: 0;
  list-style-type: none


input 
  display: block;
  outline: 0;
  border: none !important


textarea 
  display: block;
  outline: 0


input:focus,
textarea:focus 
  border-color: transparent !important


button 
  outline: 0 !important;
  border: none;
  background: 0 0


button:hover 
  cursor: pointer


iframe 
  border: none !important


.limiter 
  width: 100%;
  margin: 0 auto


.container-table100 
  width: 100%;
  min-height: 100vh;
  background: #c4d3f6;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 33px 30px;
  font-size: min(2vw, 10px); /* ADDED */


.wrap-table100 
  width: 960px;
  border-radius: 10px;
  overflow: hidden


.table 
  width: 100%;
  display: table;
  margin: 0


.row 
  display: table-row;
  background: #fff


.row.header 
  color: #fff;
  background: #6c7ae0


.cell 
  display: table-cell


.row .cell 
  font-family: Poppins, sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px;
  font-size: 1.5em; /* ADDED */
  color: #666;
  line-height: 1.2;
  font-weight: unset !important;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f2f2f2


.row.header .cell 
  font-family: Poppins, sans-serif !important;
  font-weight: 400 !important;
  font-size: 18px;
  font-size: 1.8em; /* ADDED */
  color: #fff;
  line-height: 1.2;
  font-weight: unset !important;
  padding-top: 19px;
  padding-bottom: 19px


.row .cell:nth-child(1) 
  width: 240px;
  padding-left: 40px


.row .cell:nth-child(2) 
  width: 240px;
  padding-left: 20px


.row .cell:nth-child(3) 
  width: 240px;
  padding-left: 20px


.row .cell:nth-child(4) 
  width: 240px;
  padding-left: 0


.row,
.table 
  width: 100% !important


.row:hover 
  background-color: #ececff;
  cursor: pointer

<div class=limiter>
  <div class=container-table100>
    <div class=wrap-table100>
      <div class=table id=adi45>
        <div class="row header">
          <div class="cell hd">Full Name</div>
          <div class="cell hd">Email Address</div>
          <div class="cell hd">Username</div>
          <div class="cell hd">Password</div>
        </div>
        <div class=row>
          <div class=cell data-title="Full Name">Joseph Smith</div>
          <div class=cell data-title=Age>27</div>
          <div class=cell data-title="Job Title">Project Manager</div>
          <div class=cell data-title=Location>Somerville, MA</div>
        </div>
      </div>
    </div>
  </div>
</div>

说了这么多，鉴于您希望所有视口大小都具有相同的布局，并且数据似乎确实是一个表格（尽管给出的条目与标题不匹配），重新开始可能会更容易并将其设置为 HTML 表格。

【讨论】：

以上是关于无法更改媒体查询的主要内容，如果未能解决你的问题，请参考以下文章

使用媒体查询更改变量

Chrome 设备模式模拟媒体查询不起作用

你能帮我处理移动媒体查询吗？

简单的媒体查询规则在页面刷新时更改

如何更改引导媒体查询条件？

为啥这个 CSS 媒体查询没有对在 iPhone 上显示的网站进行更改？ [复制]