h5移动端适配方案

Posted 2020-10-04 alan-alan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了h5移动端适配方案相关的知识，希望对你有一定的参考价值。

flex布局

flex布局，不使用rem，直接使用px。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>

/*利用flex属性，可以实现块级元素1：1：1*/
/*简单的就能使里面的内容居中（尤其是垂直居中，好用到爆）*/
.box{
    display: flex;width: 50px;height: 30px;
    /*默认 row*/
    flex-direction:colum;
}
.item1{
    display: flex;flex:1;
    background-color: rgba(213,34,102);
    /*justify-content: space-between;*/
    justify-content: center;

}
.item2{
    display: flex;flex:1;
    background-color: rgba(34,213,102);
    align-items:center;
    /*
    display: block;
    line-height: 10px;
    height: 10px;*/

}
.item3{
    display: flex;flex:1;
    background-color: rgba(102,213,34);
    /*垂直居中*/
    justify-content: center;
    align-items:center;

}
    </style>
}
}
</head>
<body>
<div class="box">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
</div>

</body>
</html>

View Code

rem方案

说明：

屏幕根据设计稿的比例转换对应的rem值(JS会根据不同的设备添加不同的缩放比(建议内联处理，在所有资源加载之前执行这个JS))

屏幕根据设计稿的比例转换对应的rem值，比如：

　　750的设置 = 16*(clientWidth/375)

　　640的设置 = 20*(clientWidth/320)

　　320的设置 = 10*(clientWidth/320)

　　例如：设计稿是750px宽度（基于iphone6 375*2=750 得到的设计稿），如果设计稿中量出某块区域的margin-top值20px，

　　　　　在实际iphone6设备375px宽度中，应该除以2，所以得到值mragin-top是20/2=10px,

　　　　　因为1rem=16px（16*（iphone6设备宽度/375）+‘px‘）,所以对应换算成rem为10/16=0.625rem。

　　　　　css代码中就是margin-top:0.625rem。技术分享

var aa = function(doc, win){
    var el = doc.documentElement,//html
    console.log(el);
    // orientationchange 事件是在用户水平或者垂直翻转设备（即方向发生变化）时触发的事件。

    resizeEvt =(‘orientationchange‘ in win )?‘orientationchange‘:‘resize‘,
    recalc = function(){
        var clientWidth = el.clientWidth;//clientWidth: 获取对象可见内容的宽度，不包括滚动条，不包括边框；
        if(!clientWidth){return;}
        el.style.fontSize = 16*(clientWidth/375)+‘px‘;

    }
    if(!doc.addEventListener){return;}
    // addEventListener事件方法接受三个参数：第一个是事件名称比如点击事件onclick，
    // 第二个是要执行的函数，第三个是布尔值
    win.addEventListener(resizeEvt,recalc,false);
    // 绑定浏览器缩放与加载时间
    win.addEventListener(‘DOMContentLoaded‘,recalc,false);



}

(function(doc, win){
    var el = doc.documentElement,//html
    console.log(el);
    // orientationchange 事件是在用户水平或者垂直翻转设备（即方向发生变化）时触发的事件。

    resizeEvt =(‘orientationchange‘ in win )?‘orientationchange‘:‘resize‘,
    recalc = function(){
        var clientWidth = el.clientWidth;//clientWidth: 获取对象可见内容的宽度，不包括滚动条，不包括边框；
        if(!clientWidth){return;}
        el.style.fontSize = 16*(clientWidth/375)+‘px‘;

    }
    if(!doc.addEventListener){return;}
    // addEventListener事件方法接受三个参数：第一个是事件名称比如点击事件onclick，
    // 第二个是要执行的函数，第三个是布尔值
    win.addEventListener(resizeEvt,recalc,false);
    // 绑定浏览器缩放与加载时间
    win.addEventListener(‘DOMContentLoaded‘,recalc,false);
})(document, windo

// 移动端H5终端适配方案


var aa = function(doc, win){
    var el = doc.documentElement,//html
    
    // orientationchange 事件是在用户水平或者垂直翻转设备（即方向发生变化）时触发的事件。
    resizeEvt =(‘orientationchange‘ in win )?‘orientationchange‘:‘resize‘,
    recalc = function(){
        var clientWidth = el.clientWidth;//clientWidth: 获取对象可见内容的宽度，不包括滚动条，不包括边框；
        if(!clientWidth){return;}
        el.style.fontSize = 16*(clientWidth/375)+‘px‘;

    }

    // console.log(el);
    if(!doc.addEventListener){return;}
    // addEventListener事件方法接受三个参数：第一个是事件名称比如点击事件onclick，
    // 第二个是要执行的函数，第三个是布尔值
    win.addEventListener(resizeEvt,recalc,false);
    // 绑定浏览器缩放与加载时间
    win.addEventListener(‘DOMContentLoaded‘,recalc,false);



}

(function(doc, win){
    var el = doc.documentElement,//html
    // orientationchange 事件是在用户水平或者垂直翻转设备（即方向发生变化）时触发的事件。

    resizeEvt =(‘orientationchange‘ in win )?‘orientationchange‘:‘resize‘,
    recalc = function(){
        var clientWidth = el.clientWidth;//clientWidth: 获取对象可见内容的宽度，不包括滚动条，不包括边框；
        if(!clientWidth){return;}
        el.style.fontSize = 16*(clientWidth/375)+‘px‘;

    }
    // console.log(el);
    if(!doc.addEventListener){return;}
    // addEventListener事件方法接受三个参数：第一个是事件名称比如点击事件onclick，
    // 第二个是要执行的函数，第三个是布尔值
    win.addEventListener(resizeEvt,recalc,false);
    // 绑定浏览器缩放与加载时间
    win.addEventListener(‘DOMContentLoaded‘,recalc,false);
})(document, window);

View Code

rem方案二

引入flexible.js，不需要在html结构中加入viewport标签。
flexible.js会在<html>元素上增加一个data-dpr属性，以及一个font-size样式。JS会根据不同的设备添加不同的data-dpr值，
比如说2或者3同时会给html加上对应的font-size的值，
比如说75px；以及会添加viewport标签，JS会根据不同的设备添加不同的缩放比(建议内联处理，在所有资源加载之前执行这个JS)

以上是关于h5移动端适配方案的主要内容，如果未能解决你的问题，请参考以下文章

H5+CSS3移动端适配技术

移动端H5页面高清多屏适配方案

基于rem的移动端响应式适配方案(详解) 移动端H5页面的设计稿尺寸大小规范

移动端H5页面适配问题研究

h5移动端适配方案

解惑好文：移动端H5页面高清多屏适配方案 (转)