Html 如何将@media查询赋予我的内联样式？

我正在制作一个响应性强的网站，并使用媒体查询，但我遇到了一个问题，我给出了内联风格。现在我想为不同大小的屏幕改变这种风格。如何做到这一点？这是我的密码

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

---

1920px大小的屏幕。请给出解决方案或给出其他方法来做这件事。我正在使用edu表格类很多地方…我想宽度=700px；对于屏幕大小1920px和特定位置。

这是您想要的，请将其放入css文件或位于

的底部。虽然宽度应始终为700px，因为您将其设置为最大宽度。目前它的最大宽度是1920像素，上面的所有东西都是500像素

.edu_table{
     width: 500px;
}

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

如果无法删除内联样式，请使用

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

是的

使用css将类作为目标：

.edu-table {
    width: 500px;
    /* styles */
}

然后，当屏幕为1920像素或更宽时，将其覆盖：

@media only screen and (min-width: 1920px) {
    .edu-table {
        width: 700px;
        /* any other styles for 1920px and above */
    }
}

在媒体查询中使用

minwidth

，将确保样式仅适用于宽度大于1920px的屏幕

---

此外，删除内联样式，因为它们将覆盖css。你可以使用

！重要信息

但只有当您没有其他可想象的选项时，因为这是一场噩梦，会让样式表变得一团糟。

您为什么还要使用内联样式？将该样式移动到css文件我在许多地方使用edu_table类…我希望宽度为700px；对于屏幕大小1920px和特定位置。没问题，您可以为元素指定多个类或不同的类，您可以将css命名为类似

.edu_table--main

的名称，并指定特定的表

class=“edu_table--main”

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

.edu-table {
    width: 500px;
    /* styles */
}

@media only screen and (min-width: 1920px) {
    .edu-table {
        width: 700px;
        /* any other styles for 1920px and above */
    }
}