通过chrome dev工具应用时，不保留媒体查询样式

Question

我一直有关于应用于html元素的样式的问题，这些更改是通过chrome dev工具完成的。我确保我的文本编辑器和chrome dev工具的编辑器已同步，以便在我的编辑器中显示开发工具中所做的任何更改。问题是当我对我的行代码进行更改时，即使我保存了所做的更改并且它反映在我的本地文本编辑器中，一旦刷新浏览器，更改就会消失。我有什么可能做错的，我已经在网上搜索了答案，但没有。如果问题太长，请耐心等待，但我希望尽可能详细。 P.S：我使用媒体查询应用了此更改，因为我通过这种方式取得了更好的效果。 Screenshot

Answer 1

很简单，您需要做的就是从文本编辑器而不是Chrome开发工具中进行所需的媒体查询，它将得到解决。

注意：Chrome Dev工具更适合您预览您的工作而非永久性更改，这就是为什么当您刷新页面时，一切都将消失。

你应该尝试在你的风格上使用！important。 例如

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

当我遇到这种问题时，我总是使用这个