手机端的适配

2019独角兽企业重金招聘Python工程师标准>>>

如今,android、ios移动设备已渗入大家的生活里，作为一名苦逼的前端程序员，最基本的功夫，以前是要打得了IE hack，如今要拿着H5这被炒热又貌似已降温的利器去制服各个移动设备。今天就暂且先聊聊移动端的适配问题。
   做好手机端的适配，前提是得抓住点，抓住问题的点。1）、屏幕大小；2）各设备的像素比（dpr），也就是被苹果提出来的retina屏与其它普通屏的区别。其中第一个点是老生常谈，各位前端人员都知道的自适应，有用媒体查询（@media）去解决的，有用rem去解决的，有用flex布局去解决的，当然还有其它方式，在此就不累赘描述了。第二个点主要围绕retina屏（此篇文章介绍很详细：http://www.w3cplus.com/css/towards-retina-web.html），什么是retina屏？简明扼要，平常的普通屏是一个设备独立像素(density-independent pixel)或称为一个计算机呈现出来的一个点（可以理解为咱们经常用的css像素）对应着一个物理像素(physical pixel)，其中物理像素可理解为显示屏幕上最小的显示点，既然是最小，其颜色与亮度一点点堆积为一个设备独立像素。如此考虑，普通屏的设备像素比(dpr)= 设备独立像素(density-independent pixel) / 物理像素(physical pixel) =1，苹果的retina屏中dpr=2，也就是说其 设备独立像素(density-independent pixel) / 物理像素(physical pixel) =2。
   在retina屏下一般需要解决的是图片的清晰度与字体rem的基数设置。关于图片的清晰度，在苹果的retina屏中dpr=2的前提下，解决的方式有，可以让ui切2倍图，然后判断是普通屏还是retina屏，在普通屏下加载普通图，在retina屏下加载相应的2倍图；关于字体rem的基数设置，解决的方式有，根据UI给的设计图，计算宽的比例设置基数，如:如果其给的设计图宽度为750，又以100px作为标准，则document.documentElement.style.fontSize=100*（document.documentElement.clientWidth/750）+‘px’。具体详细做法，可参照此文章：http://www.mamicode.com/info-detail-1191565.html。

推荐资料：http://www.w3cfuns.com/notes/17522/08945ff94cbe1eafa25365a3fdd801eb
                 http://div.io/topic/1567
                上面资料看完，用此便可： http://www.w3cfuns.com/notes/29143/79dafb7c07f6865f435af641869d3125.html

转载于:https://my.oschina.net/wsh2016/blog/756426