如何为我的内联样式提供@media 查询？
Posted
技术标签:
【中文标题】如何为我的内联样式提供@media 查询？【英文标题】：how to give @media query to my inline style? 【发布时间】：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 文件中 【参考方案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，但前提是你没有其他可以想象的选择，因为它是一场噩梦，并且会弄乱样式表。
【讨论】：
以上是关于如何为我的内联样式提供@media 查询？的主要内容，如果未能解决你的问题，请参考以下文章
Styled Components - 内联样式与媒体查询样式重叠