HTML网页如何自动适应手机屏幕

Question

在网上看到用一下方法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
但是有些手机可以自动适应屏幕大小，而有些则不可以，请问是为什么呢？（是否跟手机屏幕分辨率有关？）
另外，加了此代码会使得网页左侧的按钮和右侧的表格之间的间距出现问题，横屏时是有间距的，但是竖屏就会导致按钮和表格重叠，请问这又是为什么呢？

Answer 1

　　这位网友你好，除了写上上面那句话之外，还需要用媒体查询也就是@media来定义不同分辨率下网页的样式的，这样就可以解决间距大小和其他重叠的问题。

追问

谢谢您，@media应该如何用，可不可以教一下啊，感谢！

追答

　　你好，我给你写了一个小例子，你下载一下看看，把窗口缩小会看到效果，不同窗口大小会显示不一样的效果。