所有設備的媒體查詢

有沒有一種更簡單的方法，使我的網站在不同的移動設備上看起來不錯，而不是爲所有設備設置不同的媒體查詢？所有設備的媒體查詢

2016-10-09 Stew

您可以使用媒體查詢作出響應的網站，但你必須調整各種屏幕，比如iPad的

/* ----------- iPad mini ----------- */ 

/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (-webkit-min-device-pixel-ratio: 1) { 

} 

/* Portrait */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 1) { 

} 

/* Landscape */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 1) { 

} 

/* ----------- iPad 1 and 2 ----------- */ 
/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (-webkit-min-device-pixel-ratio: 1) { 

} 

/* Portrait */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 1) { 

} 

/* Landscape */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 1) { 

} 

/* ----------- iPad 3 and 4 ----------- */ 
/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (-webkit-min-device-pixel-ratio: 2) { 

} 

/* Portrait */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 2) { 

} 

/* Landscape */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 2) { 

}

同樣可以看起來像筆記本電腦，平板電腦，迷你手機等其他設備這裏是一個爲媒體屏幕提供了所有屏幕大小的文章https://css-tricks.com/snippets/css/media-queries-for-standard-devices/。在這裏再次重寫這一點毫無意義。

除了媒體查詢，您可以使用像引導程序這樣的框架，它可以減少使用媒體查詢的麻煩，而您可以使用其具有預定義CSS的類。

來源

2016-10-10 04:56:29 smarttechy

'device-width'和'device-height'已折舊。 [https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries] –

@IgnatOspadov您的鏈接不起作用 – smarttechy

oops鏈接的格式有錯字。沒有格式錯誤的同一鏈接：[link]（https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries） –

你能用寬度來做嗎？

@media screen and (max-width: 480px) { 
    // CSS Here 
}

來源

2016-10-09 20:38:20

您通常使用一些媒體查詢：1200，992，768和480。也許這不是如果你希望你的網站是充分響應，很多。或者，您可以學習和使用Bootstrap，這對於響應能力有很大幫助。

來源

2016-10-09 20:42:54 Varin

所有設備的媒體查詢

回答

相關問題