移动端屏幕适配原理以及方法讲解

发布时间:2017-7-9 7:09:00编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"移动端屏幕适配原理以及方法讲解 ",主要涉及到移动端屏幕适配原理以及方法讲解 方面的内容,对于移动端屏幕适配原理以及方法讲解 感兴趣的同学可以参考一下。

移动端屏幕适配原理以及方法讲解

序言:

今天周日,我正坐在黄埔区图书馆,思索着关于移动端屏幕适配的问题。作为一名年纪轻轻的前端马蓉,不,是码农,移动端屏幕适配的方案的帖子没读过100篇吧,也读过几十篇了。可是今天我又在思考这个问题了,因为下周我有个关于移动端适配的演讲。人生这么短暂,我却把有限的时间奉献到了无限的前端道路上。

根据我不(cong)太(ming)灵(jue)活(ding)的大脑的努力思考。我发现现阶段比较流行移动端适配原理只有一个——就是对元素进行放大和缩小,具体到执行的时候方法有两个(求不打脸)。 1个是网页大小不变只对其中的元素进行放大缩小的rem单位值缩放法,另1种是对直接对整个网页进行放大缩小的网页缩放法。为什么你没有听过这两个方法?因为这两个方法的名字都是我起的,还没著名起来。

  1. rem单位值缩放法;具体做法是让1rem对应的px值根据手机的不同而不同,可能在iphne5上1rem等于10px,在iphone6上1rem就等于11.7px了(iphone6的屏幕宽度是iPhone5屏幕宽度的1.17倍,所以1rem对应的px值也要是1.17倍)。 具体1rem值是多少,可以通过js或者css3的媒体查询算出来。然后网页上的元素都使用rem作为尺寸单位。iphone5上表现良好的页面,放到iphone6上的时候,因为rem对应的px值被放大了,所以所有元素的尺寸位置也被等比例放大了,所以在iphone6下自然也就表现良好了。修改rem值的方法有两个。

    1.1 使用js修改html的fontsize值大小。

    1.2 使用媒体查询修改html的fontsize值大小。

  2. 网页缩放法:这个方法就简单暴力了,搞得人心里经常怕怕的。具体做法就是以一个手机为基准,一般是iphone5。在iphone5上先制作好页面,制作完页面之后再在页面加入一段适配的js,这段js的作用就是获取屏幕的宽度然后与iphone5进行比较,比iphone5宽的就把网页放大,比iphone5页面窄的就把网页缩小。比如iPhone6的手机屏幕宽度是iphone5的1.17倍,就通过js把整个网页放大1.17倍。酱紫在iphone5上表现良好的页面在iphone6上就没问题了。具体怎么放大缩小,有两种方法。

    2.1 缩放html元素,使用transfrom的scale属性或者zoom属性。

    2.1 使用meta标签的 initial-scale、minimum-scale和maximum属性

看到这里,你可能有个疑问,为啥我们都是根据宽度去调整页面而不是根据高度啊。根据我抄袭别人的经验,高度调整是比较容易的,给底部的元素一个bottom定位就可以。不行你就往中间挤挤喽,我说的方法只是讲原理,你要是想做的完美还要灵活运用

如果你看完序言的1、2点,恭喜你,你已经掌握掌握了移动端适配的九阳神功了。下面就是打通任督二脉的时候,骨骼惊奇的人可以飘过。

1.rem单位值缩放法

ps:这名字是我起的。

1.1 rem是什么

w3c定义:font size of the root element

翻译一下:rem为根元素的字体大小。网页的根元素就是html元素,所以rem就是html元素的字体大小。

假设html字体大小16px,那么1rem就是16px。假设html字体大小为10px,那么1rem就是10px。

1.2 rem值与设计稿之间的关系

1.2.1设计稿尺寸

移动端的设计稿一般都是以iphone5为准设计的,为了显示清晰,设计稿的尺寸通常是屏幕尺寸的两倍。比如iphone5的尺寸是320x568,所以设计稿一般640x1136。根据情况的不同,设计稿也有640x1008和640x960的。高度比较容易调整,宽度能保证是两倍就可以啦。

因为设计稿是以iphone5为准设计的,所以我们制作的时候最好也是以iphone5为准,这样比较好计算。其他屏幕只要我们页面进行放大和缩小就能达到适配的效果。

1.2.2设置rem值的大小

因为我们是采用rem单位值缩放法,所以首先要确认一点,1rem值要等于多少px比较合适。其实这里就比较随意了,你爱设置成多少就可以设置成多少。当然从实际应用的角度出发,把rem值设置成10px或者100px会比较好,因为计算方便。我们这里以1rem等于10px为例

此时我们需要在页面添加如下css

html{  font-size:10px;}

因为所有的浏览器默认字体大小都是16px,所以我们也可以设置html的fontsize为62.5% (10/16*100%);

html{  font-size:62.5%;}

这样我们1rem就是10px了。

ps,默认情况下浏览器允许的最小字体是12px,即使你把字体设置成10px,浏览器还是按照12px来显示。为了解决这个问题,需要你在html上设置一个样式;

html{  text-size-adjust:none;  -webkit-text-size-adjust:none;}

 

1.2.3rem值与设计稿的对应关系

因为1rem=10px。所以把px转化为rem的时候,只要把px的值除以10再把单位由px转为rem就可以了。对应到设计稿上的话,因为设计稿尺寸是屏幕尺寸的2倍,所以把设计稿上的元素尺寸由px转化为rem的时候是除以20(先把设计稿缩小2倍,使设计稿跟屏幕尺寸一样大,再除以rem和px10倍的对应关系)。假设设计稿上有个图片宽高是100px,对应的rem值就是5rem(100/2/10)。

1.2.4rem值与px的对应关系。

其实这一点不用讲了,1rem就是10px。但是避免1.2.3有误导,所以特别说明下。

假设你是在chrome开发者工具上,设置个元素的宽高为100px。那么转化成对应的rem就是10rem(100/10)而非5rem(100/2/10)。因为此100px相对的是320px的屏幕而非640的设计稿,所以不用再除以2了。

1.2.5其他屏幕的适配

经过前面的4点,你的设计稿在iPhone5上应该已经能正常显示了。此时你用iphone6看的话,你的页面可能错乱了。因为你还没有在iphone6对页面做适配,也就是你在iPhone6下还没有修改rem对应的px值的大小。

1.2.5.1使用js修改rem值的大小

这个方法比较简单,获取其他手机屏幕相对于iphone5手机屏幕的大小,然后放大和缩小html的fontsize值就可以了。这个方法有个缺点就是fontsize值可能为小数,有可能导致页面上的文字出现模糊不清的情况。只要微调下就可以并不是大的问题。js代码如下:

(function(){  var scale = window.innerWidth/320;  document.documentElement.style.fontSize = 10*scale+"px";})()

使用上面这段代码是有前提的,就是页面必须要加这段html代码。

<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">

原因如下:

在移动端的发展过程中,早期的手机为了正常显示pc页面,手机默认的viewport的宽度并不是手机屏幕的宽度,一般默认的viewport宽度为980px,当然也有手机默认的宽度为1280px。这样如果你不把viewport的宽度设置为device-width的话,window.innerWidth就是默认值980px或者是1280px。这样我们上一段代码就有问题了。我们使用window.innerWidth获取的并不是屏幕的宽度,所以求出来的scale也就错了。

解决方法有两个,一个是加上meta那一段html代码,既设置viewport的width为device-width。推荐使用这个方法(其实现在的移动端页面都有这段代码)。第二个方法就是改用screen.width而不是使用window.innerWidth。

var scale = screen.width/320;
 点击参看demo
1.2.5.2使用媒体查询适配

使用媒体查询设置html元素font-size的大小。这个方法简单但是工作量较多,一来是需要知道市场上所有主流的手机的屏幕尺寸,二来如果未来出现新的机型号到时候可能又会出现页面不适配的情况。当时这个方法确实比较简单一点,媒体查询的css如下:

html{  font-size:62.5%;}@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {    html { font-size: 70.3%; }}@media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) {    html { font-size: 73.24%; }}@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {    html { font-size: 75%; }}@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {    html { font-size: 78.125%; }}@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){    html { font-size: 80.86%; }}@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){    html { font-size: 84.375%; }}//以下为ipad分辨率@media screen and (min-width:480px)and (max-width:639px) and (orientation:portrait){   html{ font-size:93.75%;}}@media screen and (min-width:640px) and (orientation:portrait){   html{ font-size:125%;}}

点击参看demo

1.3 总结

rem单位值缩放法,原理上很简单,就是让1rem对应的px值根据屏幕的不同而不同。在某一个屏幕上页面做好效果后,在其他屏幕上显示的时候,再根据该屏幕相对于标准屏的大小,对rem值进行放大和缩小。其中通过js修改rem的方法,最简单也最好用,在不同的屏幕下表现也很好。

2.网页缩放法。

这里对css的单位要求就不大了,你可以使用rem(这里1rem对应的px值不同屏幕下是不变的),也可以使用px。当时使用rem是比较好的。因为使用rem你可以方便切换其他适配方法

2.1如何制作设计稿

这其实没啥可讲的啦,就跟普通的pc端制作页面一样。不过还是有要点要提醒下的,如果你是640的设计稿你就在iphone5下制作,如果你是750的设计稿你就iphone6制作。制作完后,你喜欢的话就可以把px转成rem,不喜欢的话就用px。至于怎么选择主要还是看你周围妹子的颜值了。

2.2使用css属性对网页进行缩放

这里的css属性是指css的zoom属性而不是transform的scale属性,因为zoom跟scale还是有些不同的,最简单的有两个,1个是zoom的缩放是以左上角为基点的,而scale是以元素的中心为基点,第二个不同是zoom是真实的对元素进行放大和缩小,而scale仅仅只是缩放外观,元素实际大小并没有改变。

假设设计稿还是640px,我们在iphone5制作完页面以后,为了达到兼容其他手机屏幕的效果。我们要在页面加一段js,这段js的作用是获取屏幕的宽度,然后与iphone5屏幕尺寸进行比较,如果比iphone5屏幕大, 我们就放大页面,如果比iphone5屏幕小我们就缩小页面。放大和缩小页面其实就是放大和缩小html元素。也可以放大或者缩小body元素,不过缩放body元素有bug,html小body大就会溢出,body小html大,底部会有空白。所以缩放html元素是最好的。

(function(){	var zoom = screen.width/320;  	document.documentElement.style.zoom=zoom;})();

点击参看demo

2.3使用meta标签的网页缩放法

除了使用css属性对页面缩放外,我们还可以使用name为viewport(视窗)的meta标签对页面进行缩放,该标签是苹果公司最先在浏览器中实现的,不过现在已经得到了几乎所有移动端浏览器的支持。为了不打脸我加了“几乎”,其实你见到的浏览器都支持这一属性,所以大胆的用吧,不用担心。

name为viewport(视窗)的meta标签有以下属性


上一篇:Tomcat使用Https协议的证书申请说明书
下一篇:mongodb概念

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款