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

h5移动端适配方案

时间:2017-08-24 19:43:22      阅读:322      评论:0      收藏:0      [点我收藏+]

标签:func   ret   eve   log   data-   body   属性   isp   建议   

 

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移动端适配方案

标签:func   ret   eve   log   data-   body   属性   isp   建议   

原文地址:http://www.cnblogs.com/alan-alan/p/7424387.html

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