Question

我正在制作一个响应式网站，并使用媒体查询但是，我坚持一个问题，我给了内联样式。现在我想为不同尺寸的屏幕改变那种风格。怎么做？这是我的代码。

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

我已经给出了宽度= 500px的样式;

我想要700px

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

1920px大小的screen.please为它提供解决方案或给其他方式来做这件事。我使用edu_table类很多地方......我想要宽度= 700px;屏幕尺寸为1920px，适用于特定场所。

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;
        }
    }

Answer 2

这是你想要的，把它放在一个css文件中或放在<head>的底部。虽然宽度应始终为700px，因为您将它们设置为max-width。目前它的最大宽度为1920px，上面的所有内容都将达到500px。

.edu_table{
     width: 500px;
}

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

Answer 3

not possible到put media queries in style attributes。

使用css定位该类：

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

然后在屏幕为1920px或更宽时覆盖它们：

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

在媒体查询中使用min-width将确保样式仅适用于宽度超过1920px的屏幕。

此外，删除内联样式，因为它们将覆盖css。您可以使用!important，但前提是您没有其他可想到的选项，因为这是一个过度噩梦，可能会造成一堆乱七八糟的样式表。

如何将@media查询提供给我的内联样式？

3 个答案: