移动端页面字体单位rem
2017-05-11 14:14
183 查看
1.rem根据页面大小来自适应
2.写入下面这段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();
});
3.假如字体是12px。我们就写0.12rem,14==0.14rem,20==0.2rem,以此类推
4.这样在不同分辨率的手机上就会显示不一样的字体大小。
2.写入下面这段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();
});
3.假如字体是12px。我们就写0.12rem,14==0.14rem,20==0.2rem,以此类推
4.这样在不同分辨率的手机上就会显示不一样的字体大小。
相关文章推荐
- 移动端页面以rem为单位设置字体大小不生效解决方法
- 移动端响应式开发rem字体与页面百分比设置
- 响应式页面字体用什么单位:rem
- 【移动端】移动端字体单位font-size选择px还是rem
- 以rem为单位移动端页面开发
- 移动端字体大小单位rem
- 移动端字体单位font-size选择px还是rem
- 移动端页面使用单位的问题:关于px、百分比、em、rem开发中逐渐转换的问题记录
- 移动端html5手机网站字体单位font-size选择px还是rem
- 移动端布局字体单位的选择之px、rem和em揭秘
- 移动端字体大小单位rem
- rem测试用实现移动端自适应页面
- 使用rem设计移动端自适应页面二(转载)
- 如何使用rem字体单位
- 移动端系列讲解之字体单位
- 移动端rem布局导致页面加载瞬间无样式
- 移动端页面布局:百分比布局、rem布局
- 移动端页面自适应解决方案 rem布局
- 移动端web页面使用字体
- 移动端 rem字体的使用demo