Web移动端开发常规全局设置

最新推荐文章于 2021-04-23 13:38:32 发布

原创最新推荐文章于 2021-04-23 13:38:32 发布 · 268 阅读

1 ·

CC 4.0 BY-SA版权

Mobile Web 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了移动端Web开发中使用rem单位进行响应式布局的两种解决方案，并提供了实例代码。此外，文章还讨论了移动端默认字体设置、简单flexbox布局、URL数据传递以及常规的清除浮动方法。最后，提到了Scroll5作为更成熟的滚动框架替代方案。

一，两种rem解决方案

1，根据dpi来设定rem以及viewport

（美团的REM解决方案）

//根据屏幕大小及dpi调整缩放和大小
        (function() {
            var scale = 1.0;
            var ratio = 1;
            if (window.devicePixelRatio >= 2) {
                scale *= 0.5;
                ratio *= 2;
            }
            var text = '<meta name="viewport" content="initial-scale=' + scale + ', maximum-scale=' + scale +', minimum-scale=' + scale + ', width=device-width, user-scalable=no" />';
            document.write(text);
            document.documentElement.style.fontSize = 50*ratio + "px";
        })();

2，根据屏幕宽度来设置rem

var autoChange=function(maxWidth,originSize){
    var width=document.documentElement.clientWidth;
    var Standard=originSize/(maxWidth*1.0/width);
    Standard=Standard>100?100:Standard;
    document.querySelector("html").style.fontSize=Standard+"px";
};
autoChange(750,100);

经测试第一种更佳。

二，移动端默认字体设置：

无衬线字体:

<style>
body{
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
</style>

三，简单的flexbox布局

<style>
/* 父级元素 */
display: -webkit-box;
display: -webkit-flex;
display: flex;
/* 子集元素 */
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
</style>

四，URL传递数据

function request(paras) {
    var url = location.href;
    url = decodeURI(url);
    var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
    var paraObj = {};
    for (var i = 0; j = paraString[i]; i++) {
        paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length);
    }
    var returnValue = paraObj[paras.toLowerCase()];
    if (typeof(returnValue) == "undefined") {
        return "";
    } else {
        return returnValue;
    }
}

五、常规的清浮动

<style>
  .clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
  .clearfix { display: inline-table; }
    /* Hides from IE-mac \*/
    * html .clearfix { height: 1%; }
    .clearfix { display: block; }
    /* End hide from IE-mac */
</style>

六、弹性滑动框架

iscroll5：Scroll 5 is a faster more mature code than the previous versions. It doesn’t add many new features but it fixes bugs and most notably runs smoother on old devices. Please note that previous releases are not maintained nor supported, so go get the new version!