您的位置：首页 > 移动开发 > WebAPP

webapp font-size解决问题的方案

2016-02-18 11:53 567 查看
最近在微博上看到流云诸葛总结的一篇文章《从网易与淘宝的font-size思考前端设计稿与工作流》，其中介绍到的几种WebApp适配方案，我们现在的做法恰好是跟某招聘网站类似的方案，当然就会有上面我提到的一些问题，最后经过预研和demo测试，我们采取了网易跟淘宝的方案，其实这两者的方案是大同小异，都是基于rem的适配方案。

　　2、解决问题的方案

　　网易跟淘宝的方案介绍流云诸葛的文章中已经写的很清楚了，建议可以先看看那篇文章再阅读下面我所说的，可能会更加清晰。

　　(1)方案的简单介绍:基于rem

　　前提：页面元素的布局尺寸全都以设计稿为基准等比例设置。

　　给html根节点设置一个基础font-size值，然后页面的所有元素布局均相对于该font-size值采用rem单位设定。那么基础的font-size值该如何取呢?

　　假如通过媒体查询设置font-size，只能解决一部分的情况，而且并不能完成适配，因为手机屏幕宽度类型实在太多了，所以font-size的取值要通过js计算，取当前viewport的deviceWidth与设计稿的宽的比例值，例如：我们的设计稿尺寸都是640px的，iphone5的deviceWidth是320px，那么计算出来的font-size值就是320/640=0.5，因为得出的font-size太小，不方便计算，且有的浏览器可能不兼容太小字号，所以将font-size放大100倍，所以最终计算出来的font-size为320/640*100
=50(px);当然，这个值是根据设计稿来计算的，所以根据计算规则，下面列出几种常见设计稿相应的font-size值：

1
deviceWidth
=320，font-size=320/6.4=50px
2
deviceWidth
=375，font-size=375/6.4=58.59375px
3
deviceWidth
=414，font-size=414/6.4=64.6875px
4
deviceWidth
=500，font-size=500/6.4=78.125px
　　可在script标签加上如下代码

01
(
function
()
{
02
document.addEventListener(
'DOMContentLoaded'
,
function
()
{
03
var
html
=document.documentElement;
04
var
windowWidth
=html.clientWidth;
05
html.style.fontSize
=windowWidth/6.4+
'px'
;
06
//
等价于html.style.fontSize=windowWidth/640*100+'px';
07
},
false);
08
})();
09
10
//
这个6.4就是根据设计稿的横向宽度来确定的，假如你的设计稿是750
11
//
那么html.style.fontSize=windowWidth/7.5+'px';
　　至此，font-size的基础值就确定好了，而且知道该font-size值是手机deviceWidth跟设计稿的比例值的100倍(重要)

　　(2)那么页面元素该如何设置宽高、边距

　　例如：一个设计稿宽高为140px的图标，左边距为50px，那么它的css应该这样写

1
.icon
{
2
width:
1.4rem;
/*
像素换算rem：140px/100=1.4rem*/
3
height:
1.4rem;
4
margin:
000.5rem;
5
}
　　因为html的font-size是放大了100倍，所以计算rem时，要用设计稿的实际像素除以100，140px/100=1.4rem;最后实际的像素大小就会由deviceWidth跟设计稿的横向宽的比例自动计算出来。

　　如图iPhone5下面的效果：





　　iPhone6的效果：





　　可以看出来：html的font-size动态根据deviceWidth改变，图标的宽高、边距等也根据font-size动态按比例变化，大功告成了?不对，相信机智的你已经看到貌似在iPhone6的下有的图标背景错位了。是的，这暴露出了一个背景使用雪碧图的一个弊端(由于font-size小数点太多，计算出实际背景图大小background-size跟背景图位置background-position时浏览器精度不够可能就会出现位置的偏差(我猜的)，这个后面还会详细讲解决方案)

　　到这里，设置宽高、边距等都OK了，接下来...

　　(3)其他元素的字体大小该如何设置?

　　在流云诸葛的文章中讲到，网易跟淘宝的做法都是使用额外的媒体查询设置几种字体大小，例如：

01
@media
screen
and
(max-width:
320px){
02
body{font-size:
14px;}
03
}
04
@media
screen
and
(min-width:
321px)
and
(max-width:
413px){
05
body{font-size:
16px;}
06
}
07
@media
screen
and
(min-width:
414px)
and
(max-width:
639px){
08
body{font-size:
17px;}
09
}
10
@media
screen
and
(min-width:
640px){
11
body{font-size:
18px;}
12
}
　　可为什么不用rem呢?后来去查了一番资料，发现有一种叫做点阵字体的存在(什么是点阵字体)，也叫作位图字体，位图我们都知道，跟矢量图是有区别的，就是放大会模糊，所以点阵字体也是放大会模糊的，如果根据rem设置字体大小，字体会自由缩放，可能就会导致点阵字体模糊，所以需要设定使用几种固定大小的字体。不过，在正常情况下，系统自带的字体都是矢量字体，所以使用rem为单位是没有问题的，除非你的网页需要用到特殊的点阵字体。

　　总结：如果网页没有用到特殊的点阵字体，字体单位使用rem，如果用到了点阵字体，字体需要通过媒体查询设置几种固定大小的字体

　　(4)关于背景图片的错位问题

　　上面已经发现了，通过换算rem设置background-size跟background-position的时候，在一些手机型号下会出现背景图错位的情况，可是如果不用rem设置的话，又不能达到适配的目的。(background-size、background-position的rem换算方法跟前面讲的宽高设定一样，都是设计稿尺寸(这时应该是雪碧图的原始尺寸)除以100倍)

　　最后经过尝试，得出了几种解决方案：

　　1)如图(推荐方案)：





　　图标的样式

01
.icon
{
02
width:
1.4rem;
03
height:
1.4rem;
04
background-image:
url(sprite.png);
05
background-repeat:
no-repeat;
06
background-size:
1.4rem;
07
}
08
.icon3
{
09
background-position:
0-2.8rem;
10
}
　　解决方法，如图：





　　代码如下：

01
.icon-fix
{
02
background:
none;
03
position:
relative;
04
overflow:
hidden;
05
}
06
.icon-fix:after
{
07
content:
''
;
08
display:
block;
09
width:
10000%;
10
height:
10000%;
11
position:
absolute;
12
left:
0;
13
top:
0;
14
background-image:
url(sprite.png);
15
background-repeat:
no-repeat;
16
background-size:
140rem;
17
-webkit-transform-origin:
00;
18
-webkit-transform:
scale(.01);
19
transform-origin:
00;
20
transform:
scale(.01);
21
}
22
.icon3:after
{
23
background-position:
0-280rem;
24
}
　　所有相关代码(传送门)。

　　2)不使用雪碧图，使用单个背景图，这个时候就不存在background-position的需要，只需设定background-size:contain;即可，这样做的弊端就在于无法使用雪碧图，图片请求增多，适用于页面图标较少的情况

　　3)使用嵌套img标签，通过绝对定位模拟background-position，具体请看responsive-sprites，这种做法需要更多的标签，且img图片只能放图标尺寸大小一样的雪碧图，而且不能通过媒体查询使用多倍图

　　以上3中解决方案第一种最优，当然有些特殊情况可能需要按需选择!

　　最后发现一篇研究rem产生小数点像素的问题的文章，感兴趣的可戳《rem产生的小数像素问题》
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航