我在网站上使用CSS媒体查询来切换到较小设备上的垂直布局。效果很好，但我想在网站上添加一个类似“显示桌面版本”的按钮。我想使此按钮（或链接，无论如何）强制或更改媒体查询评估，以便它们评估时好像屏幕宽度大于实际宽度（例如1200px而不是320px）。这可能吗？
我的CSS看起来像这样：
#logo {
/* Mobile style */
[...]
@media (min-width: @screen-sm) {
/* Desktop style */
[...]
}
}
#footer {
/* Mobile style */
[...]
@media (min-width: @screen-sm) {
/* Desktop style */
[...]
}
}
/* And so on... i.e. multiple piecewise styles, following the same pattern used in Bootstrap's css */
我发现了一种有趣的方法，该方法在主体上使用CSS类而不是媒体查询来在布局之间进行切换。但是，它完全消除了实际的媒体查询，而是使用了javascript。基于“全网络”的移动浏览器和基于屏幕大小的媒体查询
完善了CSS示例。前两个答案非常有帮助，但是我不想完全修改css组织以在根桌面版本和移动版本中分开。一种更有趣的技术：更少：您可以将CSS选择器与媒体查询组合在一起吗？
一种有趣的方法是通过javascript修改CSS媒体查询。不过，这让我有些害怕，因为浏览器支持对于这种晦涩的技术可能并不可靠：http：//jonhiggins.co.uk/words/max-device-width/
此方法有一点冗余，但是选择器具有更高的特异性，即使媒体查询匹配，选择器的属性也具有优先级。例如：
.container, .full-site.container {
/* full site styles */
}
@media (max-width: 395px) {
.container {
/* mobile styles */
}
}
当full site被点击时，添加.full-site类和整个网站的风格将适用于甚至在用395像素宽度的设备。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句