临沂麒麟科技公众号二维码

手机屏幕自适应之css写法@media


发布人:lyqlkj 发布时间:2016-11-08 浏览次数:1149次

一千款手机,就有一千种屏幕,犹如千人千面。在运用原生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文档内区分

@media screen 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。

本文由临沂麒麟科技编辑整理 网址:http://www.lyqlkj.cn/


联系我们

麒麟科技有限公司,欢迎咨询或洽谈业务。

电话:0539-2975707

手机:13954910233

网址:www.lyqlkj.cn

地址:山东临沂桃源科技广场4楼31号

自定义的标记