这是我第一次使用@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 时应用样式
最佳答案
你应该使用最大宽度..
@media only screen and ( max-width: 15em )
关于css @media 没有按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20398696/