移动版自适应解决方法

方法一

第一步:设置初始rem

css file:

html{
    font-size: calc(100vw/7.5);
}

说明:

如果设计稿基于iphone6,横向分辨率为750,body的width为750 / 100 = 7.5rem
如果设计稿基于iphone4/5,横向分辨率为640,body的width为640 / 100 = 6.4rem

100vw是设备的宽度,除以7.5可以让1rem的大小在iPhone6下等于100px。

 

第二步:全局px替换为rem

替换html中的px为rem,注意rem=px/100,即font-size: 12px,需要写成font-size: .12rem,其他宽度、高度、间距等同理。由于rem是相对于根节点元素大小的单位,遂当设备宽度改变时,采用rem布局的大小均会跟随相同比例变化,从而实现整体缩放。

方法二

使用js实现,参考网易移动版

// JavaScript Document
(function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=750){
                    docEl.style.fontSize = '100px';
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                }
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

 

下面总结下网易的这种做法:

    • 先拿设计稿竖着的横向分辨率除以100得到body元素的宽度

    images

    • 播放器高度为210px,写样式的时候css应该这么写:height: 2.1rem。之所以取一个100作为参照,就是为了这里计算rem的方便!

原创文章,作者:管理员,如若转载,请注明出处:http://www.bajiege.com/archives/908.html

(0)
管理员管理员
上一篇 2018年8月8日
下一篇 2018年10月14日

相关推荐

  • 前端项目nodejs自动部署脚本

    公司有些项目环境没有接入 jenkins 所以部署起来比较麻烦,所以写个脚本节约部署时间。 背景 前端项目分开发、测试、生产环境,开发及测试已接入 jenkins 自动部署,生产环…

    开发语言 2021年9月22日
    01.2K

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据