设置css手机屏幕 media all,手机屏幕自适应之css写法@media

一千款手机，就有一千种屏幕，犹如千人千面。在运用原生html＋css写页面时，如何让不同屏幕显示出合适的效果，是个常见的棘手问题。

如今主流手机的尺寸分别有(单位为points)：

i4：320x480

i5／i5s／5c：320x568

i6：375x667

i6＋：414x736

主流安卓：360x533

可见，7款iphone有着4种尺寸，但主流的安卓机大多是同样的。

最简单的方法，就是按最小屏幕的尺寸来写，多出的空间适当留空。或者大量使用比例而非绝对数值。

如果对页面元素布局的要求很高，那就需要针对不同屏幕写不同的css。方法有两种：

一，html外联不同的css文件

media="screen and (max-width: 400px)"

href="tinyScreen.css" />

此代码的意思是，浏览器宽度400px以下时，读取tinyScreen.cs文件。

二，css文档内区分

@mediascreen and (max-width: 400px) {

.a { width：200px;}

}

@media screen (min-width:400px) and (max-width: 600px) {

.a { width：300px;}

}

此代码的意思是，浏览器宽度400px以下时a类的宽是200px，400～600px时a类的宽是300px。