媒體查詢了我使用媒體查詢在我的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

回答