美文网首页
移动端自适应方法

移动端自适应方法

作者: cCedar | 来源:发表于2018-05-19 14:50 被阅读0次

    动态设置像素比

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    
    //获取像素比
    
    var pixelRatio = 1 / window.devicePixelRatio;
    
    //通过js动态设置视口(viewport)
    document.write('<meta name="viewport" content="width=device-width,initial-scale='+pixelRatio+',minimum-scale='+pixelRatio+',maximum-scale='+pixelRatio+'" />');
    

    动态设置字体大小

    // 获取html节点
    var html = document.getElementsByTagName('html')[0];
    // 获取屏幕宽度
    var pageWidth = html.getBoundingClientRect().width;
    // 屏幕宽度 / 固定数值 = 基准值
    html.style.fontSize = pageWidth / 10 + "px";
    //实际宽度
    width=(测量宽度/rem)*rem
    

    使用less

    a {
      -webkit-tap-highlight-color: transparent;
      text-decoration: none;
      color: #818788;
    }
    input {
      -webkit-appearance: none;
    }
    

    相关文章

      网友评论

          本文标题:移动端自适应方法

          本文链接:https://www.haomeiwen.com/subject/hiotgxtx.html