在PC端曾经为了兼容IE低版本浏览器而头痛不已,以为到移动端可以跟这些麻烦说拜拜,但是理想很丰满现实很骨感,自己接手做了一个移动端web的小项目之后,就发现我too young too simple,虽然现在那个项目已经上线,但是实现的方案着实让人着急,所以经过一番研究,把移动端适配相关方案分享给大家,当然很多参考,如有问题请指正。
在进入正文之前最好先了解:物理像素、逻辑像素、DPR和Rem
1、利用媒体查询,但是缺点很明显,要设置一大堆css代码,而且不一定适配全部机型,不建议单独使用。例如:下面
html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}
2、利用弹性布局或者百分比或者缩放实现,实现起来挺方便的,但是有个问题,就是对设计师的设计稿有要求,这显然也不是我们所期望的,所以也不是我们常用方案。(用到知识点是display:flex)
3、利用rem的特性,动态的计算html上的font-size。简单的理解,rem就是相对于根元素<html>的font-size来做计算。而我们的方案中使用rem单位,是能轻易的根据<html>的font-size计算出元素的盒模型大小。而这个特色对我们来说是特别的有益处。
网上大部分方案都是参照网易和淘宝的方案。
网易的方案是:
(1)先拿设计稿竖着的横向分辨率除以100得到body元素的宽度
(2)布局时,设计图标注的尺寸除以100得到css中的尺寸
(3)在dom ready以后,通过以下代码设置html的font-size
(4)font-size可能需要额外的媒介查询,并且font-size不能使用rem
它的设计稿应该是基于iphone4或者iphone5来的,所以它的设计稿竖直放时的横向分辨率为640px,为了计算方便,取一个100px的font-size为参照,那么body元素的宽度就可以设置为width: 6.4rem,那么该设计稿中某个标题就可以设置0.16rem(设计稿是16px),某个div的高度就可以设置2.1rem(设计稿中未210px)。html的font-size=deviceWidth / 6.4(如果是750的设计稿,应该除以7.5),当分辨率(deviceWidth)发生变化时,html的font-size就会变,而页面中都是采用rem(rem就是相对于根元素<html>的font-size来做计算)计量单位,所以页面就做相应适配。这个deviceWidth就是viewport设置中的那个deviceWidth。
视口还是必须要设置下的
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1,user-scalable=no">
var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';
当deviceWidth大于640时,则物理分辨率大于1280(这就看设备的devicePixelRatio这个值了),应该去访问pc网站了
本人的项目就是采用网易的方案,目前挺好用的。
淘宝的方案大致也是如此,只是有些不同,感兴趣的同学可以了解下
使用Flexible实现手淘H5页面的终端适配