引導3 - 電網斷點響應式設計和高分辨率手機

目前引導有自己的網格系統/不同尺寸屏幕的像素大小設置斷點：引導3 - 電網斷點響應式設計和高分辨率手機

/* Extra small devices (phones, less than 768px) */ 
/* No media query since this is the default in Bootstrap */ 

/* Small devices (tablets, 768px and up) */ 
@media (min-width: @screen-sm-min) { ... } 

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: @screen-md-min) { ... } 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: @screen-lg-min) { ... }

然而，隨着手機現在是超高分辨率和有時有1080p的屏幕，它在一些手機上顯示平板電腦或桌面佈局，這些仍然有點無用。有沒有辦法通過查看像素密度或類似情況來進行管理？

來源

2013-12-10 purchas

[Tablet最小分辨率和最大分辨率的媒體查詢]的可能重複（http://stackoverflow.com/questions/15924032/media-queries-for-tablet-min-resolution-and-max-resolution） –

您可能會考慮設置Em而不是基於像素的斷點，因爲ems基於字體大小，縮放和其他幾個因素來啓用斷點。

那麼，最終，如果你使用的是像素，那麼它就會是嚴格的。例如，假設我們有一個媒體查詢，就像這樣;

@media（最大寬度：500像素）{這裏規則... }

這將迫使該500px的作爲斷點，無論基本字體大小或縮放級別。你可以想象，如果你的用戶放大到10倍，瀏覽器的寬度仍然是斷點的決定因素，那麼這可能會成爲一個問題，所以它可能會完全毀掉你精心設計的網站。

來源

2014-03-13 13:48:05

感謝這個有用的提示，因爲這是我以前沒有考慮過的事情，一定會研究這一點。比方說，我已經指定了最大寬度爲500px的東西，我應該指定爲500em，而不是？ – purchas

沒有，如果你想指定的東西爲500px的寬度，那麼你需要把em看作默認字體大小的一種度量，如果瀏覽器的前端大小默認是16px，那麼它是1em = 16px。因此，爲了使用ems達到500px，它將是31.250em或500px/16p = 31.25em。使用ems進行響應式設計和斷點的一個很好的例子是查看基金會以及他們如何構建斷點。 –

這是另一個習慣使用ems計算的好工具http://riddle.pl/emcalc/ –

引導3 - 電網斷點響應式設計和高分辨率手機

回答

相關問題