奔牛网>代码>网页设计>>移动端自适应以及字体单位自适应的使用
2017年06月02日

移动端自适应以及字体单位自适应的使用

最近一直在研究关于移动端字体设置以及自适应的办法,这里说的自适应我认为可以分为两种,一种是字体自适应(字体随着分辨率的变化而变化)和图片自适应,另一种仅仅是图片自适应,字体大小不变;

这里介绍一下三种方法:

方法一:这个方法很简单,记住一个词,“减半思想”,其余的做法几乎和pc端差不多,最终也能实现我们想要的效果;

1.设计师提供的页面设计稿大小一般都是640px;

2.页面可视区域均以320px,并居中布局,切图的时候按照640宽度的设计稿,将各元素减半重构,特殊要求和自适应布局除外

3.不需要设置默认字体,终端浏览器会自动将字体设置为终端上的字体

4.为页面设置viewPort;

具体如下:

<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="gbk">
<meta name="Description" content="" />
<meta name="Keywords" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>专题名-XXX官网-腾讯游戏</title>
</head>
<body>
<div id="wrap"></div>
<div class="foot">
<script type="text/javascript" src="http://ossweb-img.qq.com/images/js/mfoot.js"></script>
</div>
</body>
<script src="http://pingjs.qq.com/ping_tcss_ied.js"></script>
<script type="text/javascript">
            if(typeof(pgvMain) == 'function')pgvMain();
              if(navigator.appVersion.indexOf('Android') != -1){
                 document.addEventListener("DOMContentLoaded",function(e){
                 document.getElementById('wrap').style.zoom = e.target.activeElement.clientWidth/320;
              });
            };
</script>
</html>
css

使用2倍图来展现页面效果。假设切出来的banner宽高为:640x200。背景图可利用background-size来调整图片,img标签的图片可将其width和height减半。参考代码:

<div style="background-img:url(images/banner_2x.jpg);background-size:320px 100px;"></div>
<img width=320 height=100 src="images/banner_2x.jpg"/>
简单demo供参考:http://tgideas.qq.com/cguide/demo/mobile/index.htm

总结:这种方法字体使用的是px,这是腾讯内部做法,不太推荐使用;

方法二:

将html的字体设为62.5%,首先你得知道这是什么意思,1,浏览器的默认字体是16px,缩小为62.5%,就是16*62.5%=10px;10px=1rem;设为10px这个数字也是为了方便我们计算,例如,设计稿上是20px,我们通过这个单位换算就是2rem;当然,用这种方法的时候我也遇到过个别字体怪异的问题,比如设计师给我的字体在psd上看起来正常,但是实际做出来字体会偏小或者偏大,这种情况的话,我们可以稍微微调一下字体;

demo参考地址:http://pan.baidu.com/s/1bp1ej87



方法三:

js结合rem控制字体随着分辨率变化而变化,不过这个也要按照需求来,有些字体不需要随着分辨率变化而变化的,我们就可以不需要使用这个js,那推荐使用方法二;

具体代码如下:


  function fontSize(){
var deviceWidth = $(document).width();
if(deviceWidth > 640){
    deviceWidth = 640;
    console.log(deviceWidth);
}

var fontSize = deviceWidth / 6.4;
$("html").css("fontSize",fontSize);
console.log(fontSize)
}

fontSize();

$(window).resize(function(){
    fontSize();
});

加入这个js以后,假设设计稿的字体是20px,我们在css中设置为0.2rem;当然这种方法有时也有点缺陷,就拿我上次遇到的问题来说,产品经理说用这种方法字体在6p下太大,这时候我们可以对6p下面的字体进行微调,使用以下的代码:
顶(0)
踩(0)
最新评论