移动端自适应以及字体单位自适应的使用
最近一直在研究关于移动端字体设置以及自适应的办法，这里说的自适应我认为可以分为两种，一种是字体自适应（字体随着分辨率的变化而变化）和图片自适应，另一种仅仅是图片自适应，字体大小不变；
这里介绍一下三种方法：
方法一：这个方法很简单，记住一个词，“减半思想”，其余的做法几乎和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下面的字体进行微调，使用以下的代码：
这里介绍一下三种方法：
方法一：这个方法很简单，记住一个词，“减半思想”，其余的做法几乎和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下面的字体进行微调，使用以下的代码：
顶(3)
踩(0)
- 最新评论