我可以根据窗口大小设置样式吗?

Can I set a style conditional on window size?

本文关键字：样式 设置 窗口大小 我可以      更新时间：2023-09-26

我已经为一个youtube视频iframe设置了一个样式:

iframe {
     width: 450px !important;
     height: 253px !important;
 }

但是，如果窗口被调整为小尺寸，那么左边距消失，有空间为iframe的原始大小。当窗口大小调整时，是否可以使用iframe的原始大小?

是，使用媒体查询:

@media (min-width: 768px) {
    iframe {
         width: 450px !important;
         height: 253px !important;
    }
}

以上规则只适用于窗口宽度至少为768px的情况。你还可以在媒体查询中加入很多其他的东西来选择它适用于什么 —中(屏幕、打印等)、最大宽度等

相关文章：