Css 似乎优化的代码,
Css code that seems to optimize,
我很好奇这段代码的作用。我在网站上找到它,我想知道它是否与设备优化有关。它似乎通过所有设备影响整个页面。特别是说“@media screen and (min-width:992px)”的部分。
<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,但这似乎是使页面可通过所有设备优化的巧妙代码。它位于此站点 https://preview.webflow.com/preview/uniqlo-responsive?preview=aacb16f7eb6a5df89780c3f5bbee094d 的 html 嵌入中。您可以进入那里并双击 html 嵌入,代码就会在那里。
您正在查看的是 media query。
您看到的 min-width: 992px
表示其中的 CSS 只会触发宽度至少为 992px 的视口(相当于笔记本电脑)。您可以将媒体查询视为 'conditional CSS logic' 来控制网站在不同设备上的外观。
请注意,媒体查询与浏览器宽度/高度有关,不是屏幕宽度/高度。因此,手动调整浏览器大小 window 将触发媒体查询断点。
在这种特定情况下,当视口至少 992px
宽时应用 .t-cell { display: table-cell; vertical-align: top; }
。这将使内容在较大的设备上以表格格式显示,而内容在移动设备上保留 display: block
(允许堆叠)。
我很好奇这段代码的作用。我在网站上找到它,我想知道它是否与设备优化有关。它似乎通过所有设备影响整个页面。特别是说“@media screen and (min-width:992px)”的部分。
<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,但这似乎是使页面可通过所有设备优化的巧妙代码。它位于此站点 https://preview.webflow.com/preview/uniqlo-responsive?preview=aacb16f7eb6a5df89780c3f5bbee094d 的 html 嵌入中。您可以进入那里并双击 html 嵌入,代码就会在那里。
您正在查看的是 media query。
您看到的 min-width: 992px
表示其中的 CSS 只会触发宽度至少为 992px 的视口(相当于笔记本电脑)。您可以将媒体查询视为 'conditional CSS logic' 来控制网站在不同设备上的外观。
请注意,媒体查询与浏览器宽度/高度有关,不是屏幕宽度/高度。因此,手动调整浏览器大小 window 将触发媒体查询断点。
在这种特定情况下,当视口至少 992px
宽时应用 .t-cell { display: table-cell; vertical-align: top; }
。这将使内容在较大的设备上以表格格式显示,而内容在移动设备上保留 display: block
(允许堆叠)。