Question

实际上我有一个Web小部件，当窗口宽度小于max-width属性时，它应该进行转换。

这适用于移动设备和重新调整大小的桌面浏览器窗口。

我尝试了这些场景

   /* works only for mobile devices but not for re-sized desktop window */
   @media only screen and (max-device-width: 768px) { ... } 

   /* works only for re-sized desktop but not for mobile devices */
   @media only screen and (max-width: 768px) { ... } 

   /* works only for re-sized desktop window but not for mobile devices*/
   @media only screen and (max-device-width: 768px), (max-width: 768px) { ... }

是否有办法为移动设备和宽度小于768像素的桌面浏览器窗口实现相同的行为？

Answer 1

使用它可以在手机和窗口上使用

@media all and (max-device-width: 768px) {
... 
}

和标题中的元标记

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 2

您是否在头部或标题之后添加此代码？

＆＃13;

<meta name="viewport" content="width=device-width, initial-scale=1">

＆＃13;

Answer 3

将以下元标记放入html head标记

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

及以下是mediaquery，它将为您提供浏览器和移动设备中768宽度以下的响应式布局的结果。

/*Mobile Portrait and  Landscape*/
@media only screen and (max-width: 768px) { .. }

如果您想在IE 6-8浏览器中看到响应行为，那么您需要将respond.js附加到您的html head部分，下面是您可以下载它的链接。

https://github.com/scottjehl/Respond

谢谢， Mohsinali Chidi。

适用于移动设备和最大宽度桌面窗口的Css @media

3 个答案: