帮助 CSS + 媒体查询 + 元素样式

Question

Can some CSS ninja please verify if my thought process is right or wrong.

I have a project with media queries settings css depending on if device is landscape or portrait. If my css sets width of an element to 500px and I modify that width to let say 600px, the element style is modified.

When the device changes orientation - the element style stays at 600px regardless of what my css file is set. Because the element style is higher hierarchy than styling from a css file.

What I need to do is set that element.style('width')='' to more or less erase it.

Am I right? is there a way to get the css file to always override the element style?

Thanks!

Answer 1

If you use the.important declaration in a css file it will overwrite any inline styles. So in the example below the width of the div will be 400px.

.example {
    width:400px !important;
}

<div class="example" style="width:600px"></div>

Not sure why you are allowing a user to modify a width though - seems like you'll always get into an undesirable situation. But whatever, this should work:)