針對具有相同視口的2或3臺設備時的媒體查詢問題（768像素或1024像素）

我目前正在開發一個項目，該項目需要多個設備的用戶友好性，但在設備定位設備時遇到問題兩個視口中的一個重新相同，仍然無法找到解決方案。針對具有相同視口的2或3臺設備時的媒體查詢問題（768像素或1024像素）

我使用媒體查詢archieve這當然聽起來遠遠不夠，但沒有解釋網上的iPad的迷你本語法

@media only screen and (min-device-width : 768px) 
     and (max-device-width : 1024px) and (orientation : landscape) {}

分開這

@media only screen and (min-device-width : 768px) 
     and (max-device-width : 1024px) and (orientation : portrait) {}

而一個iPad的臨

@media only screen and (min-device-width : 1024px) 
     and (max-device-width : 1366px) and (orientation : landscape) {}

這

@media only screen and (min-device-width : 1024px) 
     and (max-device-width : 1366px) and (orientation : portrait) {}

我對Chrome的devtool測試的設備是很好，當我用最大的ipad開始，但是當我再繼續用最小的（小），它覆蓋以前的變化，因爲CSS是從頂部看所以我很困惑，請大家可以幫助我更好地理解這個概念嗎？

同樣對於移動我有一個代碼用於每個移動該多行（iPhone 5，6,6 +但仍同樣的問題）

iPhone 5

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) 
     and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {} 

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) 
     and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}

iPhone 6

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) 
     and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {} 

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) 
     and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}

iPhone 6+

@media only screen and (min-device-width : 320px) and (max-device-width : 767px) 
     and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 3) {} 

@media only screen and (min-device-width : 320px) and (max-device-width : 767px) 
     and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 3) {}

字面上我不知道如何更具體這個，但也在這裏的iPhone 5，因爲是最後一個在CSS是覆蓋iphone 6或6+的一些stile。

來源

2017-09-06 Matteo Soresini

如何爲每個設備

來源

2017-09-06 09:44:46

mmmm是真的有道理，請試試看謝謝 –

沒有解決的問題，在iphone 6plus和iphone 6之間的移動，因爲iphone 6後來是覆蓋加一個........ :-( –

編寫不同的樣式表，我會用剛剛min-width，而不是min-device-width和類似。具有視網膜顯示（iPad Mini）的768px x 1024px設備實際上具有1536px x 2048px設備像素（如果像素taio爲2：1），所以您必須使用真實設備像素大小或使用CSS像素大小。

來源

2017-09-09 12:48:41 Johannes

針對具有相同視口的2或3臺設備時的媒體查詢問題（768像素或1024像素）

回答

相關問題