媒体查询了我使用媒体查询在我的CSS手机

/* Tablet */ 
@media (max-width: 979px){ 
} 
/* Phone */ 
@media (max-width: 767px){ 
}

当我拖我的浏览器我的台式电脑上非常小的切换到手机的布局，是有办法防止这种如此小尺寸只能在手机上看到？

2013-05-15 panthro

尝试使用'max-device-width'代替 – Moses

为什么要这样？如果浏览器窗口非常窄，那么“桌面”设计肯定不适合，否则在“手机”设计中就没有任何意义。不要再考虑“电话”和“桌面”，而要专注于“窄”和“宽”。 – Quentin

你确定这是你想要的行为吗？因为屏幕宽度为767px的设备并不是真正的小屏幕设备......此外，请尝试使用@media唯一屏幕和（最大设备宽度：767px）' – Ivozor

当然可以，但问题是你真的认为矫枉过正需要它是有效的吗？

您可以向手机设备的HTML标记添加一个类（使用JavaScript或任何其他方法来验证其是否为手机）并在@media内使用此类，所以只有在应用此类时媒体查询才会生效，小例子：

HTML：

<html class="phone-device"> 

</html>

CSS：

/* Phone */ 
@media (max-width: 767px){ 
    .phone-device{ 

    } 
}

，但这又不是做正确的事...

2013-05-15 16:39:34

有没有真的需要这样做。这是响应的点，它是设备不可知的。因此，如果用户在桌面上访问您的网站，但他们的浏览器真的很瘦，内容将适合它（如Windows 8 Metro IE10侧边栏的东西）。你不想仅限于手机，一旦你完成了，你将走上一条并不意味着以响应速度旅行的道路。

2013-05-15 16:43:14 Fernker

回答