关于移动端单位的一些东西

分享 叶落染尘 ⋅ 于 2016-12-13 11:11:41 ⋅ 最后回复由 琴歌 2016-12-13 12:00:54 ⋅ 41 阅读

你们在写移动端的时候都是怎么做单位换算呢?还是依旧用px?或者说是rem、em相结合?看过很多源代码,各种书写方法都有,整的人头大,完全不知道自己该学习哪一种
当然,很多人都是在有bootstrap、hb、mui之类的移动端框架,框架有定义好的基准font-size,所以不用自己设置,方便很多,这里我想说的是,如果说不引用框架的话,怎么做移动端单位换算的,目前我学到的就一种仿Zepto.js的方法,定义基准100px转换rem,后续撸页面的时候只需要把设计稿的相应位置的px单位除以100直接就得出多少rem了。感觉挺方便的,代码如下:

!(function(win, doc) {
function setFontSize() {
// 获取window 宽度

    var winWidth = window.innerWidth;
    console.log(winWidth)
    doc.documentElement.style.fontSize = (winWidth / 750) * 100 + 'px';
//750这里是设计稿宽度

}

var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';

var timer = null;

win.addEventListener(evt, function() {
    clearTimeout(timer);

    timer = setTimeout(setFontSize, 300);
}, false);

win.addEventListener("pageshow", function(e) {
    if (e.persisted) {
        clearTimeout(timer);

        timer = setTimeout(setFontSize, 300);
    }
}, false);

//初始化
setFontSize();

}(window, document));

,萌新这里只会这么干了,求大神指教更多的方法,萌新瑟瑟发抖ing...

成为第一个点赞的人吧 :bowtie:
回复数量: 2
  • 琴歌 MOD 逍遥一世之上,睥睨天地之间。
    2016-12-13 11:58:29

    px:绝对单位,页面按精确像素展示

    em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。

    rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持。

    页面基准320px(20px),html font-size值的计算:

    var ele=document.getElementsByTagName("html")[0],  
         size=document.body.clientWidth/320*20;  
    ele.style.fontSize=size+"px"  
    

    需设置meta缩放比1:1

  • 琴歌 MOD 逍遥一世之上,睥睨天地之间。
    2016-12-13 12:00:54

    一般设置如下

    html{font-size: 62.5%;}
    

    参考下图~
    file

暂无评论~~
  • 请注意单词拼写,以及中英文排版,参考此页
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
  • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles: ~~
  • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
  • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
Ctrl+Enter