码迷,mamicode.com
首页 > 移动开发 > 详细

移动端自适应字体大小

时间:2018-02-04 21:12:31      阅读:278      评论:0      收藏:0      [点我收藏+]

标签:手机   htm   log   pos   hone   onchange   字体   cti   blog   

设置1rem = 100px

window.addEventListener((‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘), (function() {
                function c() {
                    var html = document.documentElement;
                    html.style.fontSize = 100 * (html.clientWidth / 375) + ‘px‘;
                }
                c();
                return c;
            })(), false);

一种比较普遍的开发约束:

移动端设计稿一般是750为标准,这个时候我们在谷歌浏览器选择 iphone6 (或其它375的屏)手机模式来开发,

因为pc的像素比是1,而iphone6的像素比是2,所以在我们开发过程中拿到的UI像素要除以2,

例如:UI给出的某个元素之间的margin是100px,我们就设置为0.5rem

移动端自适应字体大小

标签:手机   htm   log   pos   hone   onchange   字体   cti   blog   

原文地址:https://www.cnblogs.com/wenxiangxu/p/8414078.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!