如何添加CSS代码以响应不同的屏幕尺寸？

Question

I have android program that use view web server local HTML. But HTML don't work well in android device emulator. I use these CSS codes but it doesn't work.

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

And these below CSS codes, it work for browsers but it doesn't work well for android emulator.

@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) {}

Could someone tell me the CSS codes that work for phones and tablet, landscape and portrait. Thanks for answer...

Answer 1

我不能完全确定我了解您的问题，但是如果您遇到问题，我认为您是：尝试以下操作：

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

Answer 2

Your second version should work seamlessly:

@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) {}

Because the first version relies on device pixel ratio not upon the actual screen sizes. Did you insert the viewport meta tag in the head ?

Answer 3

Try Adding this in head section.

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

and in css file write media query as follows.

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