媒體查詢：如何針對桌面、平板和移動？我一直在對媒體查詢進行一些研究，但我仍然不太明白如何針對特定大小的設備。我希望能夠瞄準桌面、平板電腦和移動設備。我知道會有一些差異，但最好有一個通用的系統(tǒng)，可以用來瞄準這些設備。我發(fā)現(xiàn)了一些例子：# Mobileonly screen and (min-width: 480px)# Tabletonly screen and (min-width: 768px) # Desktoponly screen and (min-width: 992px)# Hugeonly screen and (min-width: 1280px) 或：# Phoneonly screen and (max-width:320px)# Tabletonly screen and (min-width:321px) and (max-width:768px)# Desktoponly screen and (min-width:769px)你認為每個設備的“斷點”應該是什么？
4 回答
慕娘9325324
TA貢獻1783條經(jīng)驗 獲得超4個贊
海事組織，這些是最好的斷點：
@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
編輯*改進后，在960個網(wǎng)格中更好地工作：
@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
在實踐中，許多設計者將像素轉(zhuǎn)換為EMS，主要是b/c EMS更好地支持縮放。標準變焦1em === 16px。乘像素1em/16px去找急救人員。例如,320px === 20em.
作為對這一評論的回應，min-width在“移動第一”設計中是標準的，您從設計最小屏幕開始，然后添加不斷增加的媒體查詢，將您工作到越來越大的屏幕上。不管你是否喜歡min-, max-注意，如果多個規(guī)則匹配相同的元素，則后面的規(guī)則將覆蓋先前的規(guī)則。
倚天杖
TA貢獻1828條經(jīng)驗 獲得超3個贊
如果你想瞄準一個設備，那就寫min-device-width。例如：
對于iPhone
@media?only?screen?and?(min-device-width:?480px){}片劑
@media?only?screen?and?(min-device-width:?768px){}
largeQ
TA貢獻2039條經(jīng)驗 獲得超8個贊
我用過這個立地找到分辨率并根據(jù)實際數(shù)字開發(fā)CSS。我的數(shù)字與上面的答案相差很大，除了我的CSS實際上擊中了想要的設備。
此外，在媒體查詢之后立即使用此調(diào)試代碼，例如：
@media?only?screen?and?(min-width:?769px)?and?(max-width:?1281px)?{? ??/*?for?10?inches?tablet?screens?*/ ??body::before?{ ????content:?"tablet?to?some?desktop?media?query?(769?>?1281)?fired"; ????font-weight:?bold; ????display:?block; ????text-align:?center; ????background:?rgba(255,?255,?0,?0.9);?/*?Semi-transparent?yellow?*/ ????position:?absolute; ????top:?0; ????left:?0; ????right:?0; ????z-index:?99; ??}}在每個媒體查詢中添加此調(diào)試項，您將看到應用了什么查詢。
添加回答
舉報
0/150
提交
取消