Question

我正在使用wordpress-theme显着。它已经具有针对移动响应的媒体查询，来自：

@media only screen and (min-device-width : 320px) and (max-device-width :     1024px) {}

正如您所看到的，它涵盖了从手机到平板电脑的宽度。我们的开发人员不希望在其所在的全局css中更改此默认代码，但我们需要在单个页面的CSS上对单独的查询中的网站和平板电脑做出响应。我希望这款手机的最大宽度为480px，平板电脑最大宽度为1024，桌面最大宽度为2000.

我应该制作三种媒体查询的正确顺序和语法是什么？当我尝试将查询放入网站时，即使我使用！也很重要。我一直在做我的研究，并且已经了解到从移动设备开始到桌面设备是更好的做法，但同样，我使用的是从桌面版本开始的wordpress。

任何建议都将非常感谢！谢谢！

Answer 1

你必须做3个媒体规则，这就是卢克这个

 /** here goes the common parte of      the style **/

/**Start of @media **/
/** Desktop Rules **/
@media (min-device-width : 1025px) {} 
/**Tablet Rules **/
@media (max-device-width : 1024px) {}
/** Mobile Rules**/
 @media (max-device-width : 480px) {}

抱歉布局不好，我来自手机。并欢迎ti stackoverflow;）

wordpress移动响应无法正常工作

1 个答案: