Question

这是我第一次使用@media。简单地说，我想要做的只是在屏幕尺寸变得非常小时才应用以下样式。以下是样式：

td { border: 0.5px solid  #0071bc; }
tr{padding-bottom: 0.5em;}
tr td:first-child { border-top-left-radius: 0.5em; border-top-right-radius: 0.5em; border-top-width: 0.2em; }
tr td { border-left-width: 0.2em; border-right-width: 0.2em; }
tr td:last-child { border-bottom-left-radius: 0.5em;  border-bottom-right-radius: 0.5em; border-bottom-width: 0.2em; padding-bottom: 0.8em;}

我目前正在使用以下代码：

@media only screen and ( min-width: 15em ) {
td { border: 0.5px solid  #0071bc; }
tr{padding-bottom: 0.5em;}
tr td:first-child { border-top-left-radius: 0.5em; border-top-right-radius: 0.5em; border-top-width: 0.2em; }
tr td { border-left-width: 0.2em; border-right-width: 0.2em; }
tr td:last-child { border-bottom-left-radius: 0.5em;  border-bottom-right-radius: 0.5em; border-bottom-width: 0.2em; padding-bottom: 0.8em;}
}

以下代码如何在全屏和小屏幕代码中为表格设置样式。我只是希望它在屏幕尺寸小于15em时应用样式

Answer 1

你应该使用max-width ..

@media only screen and ( max-width: 15em )

Answer 2

如果要将样式应用于最多宽度为15em的浏览器，请使用max-width：）

css @media没有按预期工作

2 个答案: