html - 如何为我的内联样式提供@media 查询？

Question

我正在制作一个响应式网站并为此使用媒体查询，但是，我遇到了一个问题，即我给出了内联样式。现在我想针对不同尺寸的屏幕更改该样式。怎么办？这是我的代码。

<table class="edu_table" style="width:500px;margin-right:400px;margin-bottom:30px;">

在风格上我给了 width=500px;我想要 700px

@media only screen and (max-width: 1920px) {
}

1920px 大小的屏幕。请给出解决方案或提供其他方法来做这件事。我在很多地方使用 edu_table 类......我想要 width=700px;适用于 1920 像素的屏幕尺寸和特定位置。

Answer 1

<table class="edu_table"></table>

删除内联样式

 .edu_table{
         width:500px;
         margin-right:400px;
         margin-bottom:30px;
    }
@media only screen and (max-width: 1920px) {
    .edu_table{
         width:700px;
    }
}

如果你不能删除你的内联样式然后使用重要

@media only screen and (max-width: 1920px) {
        .edu_table{
             width:700px !important;
        }
    }