通过 chrome 开发工具应用时未保留媒体查询样式

【问题标题】：Media query styles not retained when applied through chrome dev tools通过 chrome 开发工具应用时未保留媒体查询样式
【发布时间】：2018-05-09 10:41:45
【问题描述】：

我一直遇到关于应用于 html 元素的样式的问题，这些更改是通过 chrome 开发工具进行的。我确保我的文本编辑器和 chrome 开发工具的编辑器是同步的，这样在开发工具中所做的任何更改都会出现在我的编辑器中。问题是当我对我的行代码进行更改时，即使我保存了所做的更改并且它反映在我的本地文本编辑器中，刷新浏览器后更改也会消失。请问我做错了什么，我在网上搜索了答案，但没有。如果问题太长，请多多包涵，但我想尽可能详细。 P.S：我使用媒体查询应用了这些更改，因为这样可以获得更好的结果。 Screenshot

【问题讨论】：

标签： media-queries google-chrome-devtools

【解决方案1】：

这很简单，您只需从文本编辑器而不是 chrome 开发工具进行所需的媒体查询即可解决。

注意：Chrome 开发工具更多是让您预览您的工作，而不是用于永久更改，这就是为什么当您刷新页面时一切都会消失的原因。

您应该尝试在您的样式中使用 !important。例如

.media{
@media only screen and (max-width:568px){
width:100% !important;}}

遇到此类问题时，我总是使用它

【讨论】：

我已经这样做了，这就是如何在 chrome 开发工具中进行更改后，我从所选元素的内联样式中复制代码，然后将其粘贴到我的本地编辑器中，但仍然是更改不要粘住。