无法更改媒体查询

【问题标题】：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 视口大小的布局完全相同，为什么要使用媒体查询？如果一切都以相对术语（例如％）定义，那么您应该为所有人获得相同的布局。或许您可以更详细地描述问题所在？

标签： javascript html css media-queries responsive


【解决方案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 表格。

【讨论】：

    猜你喜欢
    • 2021-12-11
    • 1970-01-01
    • 2020-02-17
    • 1970-01-01
    • 2021-02-27
    • 1970-01-01
    • 2013-03-08
    • 2013-06-13
    • 2015-07-15
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode