Question

我很好奇这段代码的作用。我在一个网站上找到了它，我想知道它是否与设备优化有关。它似乎通过所有设备影响整个页面。特别是那些说＆＃34; @media屏幕和（min-width：992px）＆＃34;。

<style>

html  {
  -webkit-font-smoothing: antialiased;
}

.w-container {
  max-width: 100%; 
}

.w-container .w-row {
  margin-left: 0;
  margin-right: 0;
} 

.w-row {
  margin-left: 0;
  margin-right: 0;
}

.w-row .w-row {
  margin-left: 0;
  margin-right: 0;
}

.w-col .w-col, .w-col {
  padding-left: 0;
  padding-right: 0;
}

.pad-row .w-col {
  padding-left: 10px;
  padding-right: 10px;
}

.pad-row.w-row, .pad-row .w-row {
  margin-left: -10px;
  margin-right: -10px;
}

/*---------------------------------*/

.slider-outer {
    display: table;
    width:100%;
    height: 100%;
}
.slider-left, .slider-right {
    display: table-cell; 
    width:50%;
    height:100%;
    vertical-align: middle;
}
.slider-left {
    text-align: right;
}
.slider-right {
    text-align: left;
}

/*---------------------------------*/

.w-slider-nav-invert>div {
  border: white 3px solid;
  background: black;
}

.w-slider-nav-invert>div.w-active { 
  border: white 3px solid;
  background: white;
}

.w-slider-dot {
  width: 1em;
  height: 1em;
}

/*---------------------------------*/

.table {
    display:table;
    width: 100%;
}
.t-row {
    display:table-row;
}
.t-cell {
    display:block;
    vertical-align: top;
}
@media screen and (min-width:992px) {
  .t-cell {
      display:table-cell;
      vertical-align: top;
  }
}
</style>

我知道这是css，但它似乎是一个聪明的代码，可以通过所有设备优化页面。它是在这个网站上嵌入的html https://preview.webflow.com/preview/uniqlo-responsive?preview=aacb16f7eb6a5df89780c3f5bbee094d。您可以进入并双击html嵌入，代码将在那里。

Answer 1

您正在查看的内容称为 media query 。

你看到的min-width: 992px表示它内部的CSS只会触发至少992px宽的视口（相当于一台笔记本电脑）。您可以将媒体查询视为条件CSS逻辑＆＃39;控制网站在不同设备上的显示方式。

请注意，媒体查询属于浏览器宽度/高度，不是屏幕宽度/高度。因此，手动调整浏览器窗口大小将触发媒体查询断点。

在此特定情况下，当视口至少为.t-cell { display: table-cell; vertical-align: top; }宽时，将应用992px。这将使内容在较大的设备上以表格格式显示，而内容为移动设备保留display: block（允许其堆叠）。

似乎优化的Css代码，

1 个答案: