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

【问题标题】：how to give @media query to my inline style?如何为我的内联样式提供@media 查询？
【发布时间】：2015-09-27 10:37:48
【问题描述】：

我正在创建一个响应式站点并为此使用媒体查询，但是我遇到了一个问题，即我给出了内联样式。现在我想为不同尺寸的屏幕改变这种风格。怎么做？这是我的代码。

<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 类...我想要宽度=700px；适用于屏幕尺寸 1920 像素和特定位置。

【问题讨论】：

你为什么还要使用内联样式？将该样式移动到 css 文件中

标签： html css

【解决方案1】：

这就是你想要的，把它放在一个 css 文件中或放在<head> 的底部。尽管宽度应始终为 700 像素，因为您将它们设置为最大宽度。目前它的最大宽度为 1920px，上面的所有东西都会得到 500px。

.edu_table{
     width: 500px;
}

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

【讨论】：

我在很多地方都在使用 edu_table 类...我想要 width=700px;对于屏幕尺寸 1920 像素和特定位置。
没问题，你可以给一个元素多个类或不同的类，你可以将上面的css命名为.edu_table--main，然后给那个特定的表class="edu_table--main"

【解决方案2】：

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

【讨论】：

【解决方案3】：

not possible 到 put media queries in style attributes。

使用 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 */
    }
}

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

另外，删除内联样式，因为它们会覆盖 css。你可以使用!important，但前提是你没有其他可以想象的选择，因为它是一场噩梦，并且会弄乱样式表。

【讨论】：