如何添加CSS代碼以響應不同的屏幕尺寸？

Question

我有使用View Web Server本地HTML的Android程序。 但是HTML在Android設備模擬器中無法很好地工作。 我使用這些CSS代碼，但無法正常工作。

@media screen and (-webkit-device-pixel-ratio: 1.5) {}   
@media screen and (-webkit-device-pixel-ratio: 0.75) {}

並且這些下面的CSS代碼適用於瀏覽器，但不適用於android模擬器。

@media screen and (min-width:960px) and (max-width:1200px){}
@media screen and (min-width:720px) and (max-width:959px) {}
@media screen and (min-width:640px) and (max-width:719px) {}
@media screen and (min-width:480px) and (max-width:639px) {}
@media screen and (min-width:320px) and (max-width:479px) {}

有人可以告訴我適用於手機和平板電腦，橫向和縱向的CSS代碼。 感謝您的回答...

Answer 1

我不能完全確定我了解您的問題，但是如果您遇到問題，我認為您是：嘗試以下操作：

<meta name="viewport" content="width=device-width" />

Answer 2

您的第二個版本應該無縫運行：

@media screen and (min-width:960px) and (max-width:1200px){}
@media screen and (min-width:720px) and (max-width:959px) {}
@media screen and (min-width:640px) and (max-width:719px) {}
@media screen and (min-width:480px) and (max-width:639px) {}
@media screen and (min-width:320px) and (max-width:479px) {}

因為第一個版本依賴於設備像素比率，而不取決於實際的屏幕尺寸。 您是否在head插入了視口meta標簽 ？

Answer 3

嘗試在頭部添加此內容。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

並在css文件中編寫媒體查詢，如下所示。

@media only screen and (min-width: 600px){
}