移动端布局备忘

一 ：meta头

1、viewport 固定宽度640 target-densityDpi已经淘汰,这种写法主要面向微信端，因为宽度写死，所以就无法进行响应式布局。

<meta name="viewport" content="width=640, user-scalable=no,target-densityDpi=device-dpi">

 如果背景图需要平铺的话就需要用js对背景图进行拉取回

*{ margin:0; padding:0;}
#main{ width:640px; height:960px; position:relative; overflow:hidden;}
#list{}
#list > li{ width:100%; height:100%; position:absolute; left:0; top:0; background-size:cover;}
#list > li:nth-of-type(1){ background-image:url(img/b.png);}

 

$(function(){
    var $main = $('#main');
    var $list = $('#list');
    var $li = $list.find('>li');
    var desW = 640;
    var desH = 960;
    var viewHeight = $(window).height();
    
    $main.css('height',viewHeight);
    
    function nowWidth(){
        var w = desW/desH * viewHeight;
        return w;
    }
    
    $li.css('backgroundPosition',( (desW - nowWidth())/2 )+'px 0');
    
});

 

2、设备宽度(设置屏幕分辨率等于设备分辨率)

<meta name="viewport" content="width=device-width, user-scalable=no">

 3、像素比(动态设置缩放比例)

window.devicePixelRatio

 4、动态设置像素比 淘宝也是这么写的

            var iScale = 1;
            iScale = iScale / window.devicePixelRatio;
            console.log(iScale);
            document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=' + iScale + ',minimum-scale=' + iScale + ',maximum-scale=' + iScale + '">')
        

 5、百度移动是如何写的呢

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

 二：布局

1、header,section,footer 为块级元素 不需要设置宽度。

2、em  指容器大小除以容器内字体大小后的比例如容器大小300px而字体大小36px 则 其宽度用em表示为width：6.25em

3、rem：1rem=html的字体大小如html中font-size：20px; div{width:10rem;}则div的宽度为200px；

var iWidth = document.documentElement.clientWidth;
iWidth=iWidth>1620?1620:iWidth;
document.getElementsByTagName('html')[0].style.fontSize = iWidth/16 + 'px';   

.item {
 width:7.5rem;
height:7.5rem;
margin:0.5rem   
}

显示300px /40 = 7.5rem

边距10px/40 = 0.25rem

 

4、背景图大小 background:url(); background-size:100% 1.4em;

5、清除a标签默认点击带背景层样式

a{
                -webkit-tap-highlight-color:transparent;
            }
            input {-webkit-appearance:none;/*去除input默认样式*/}

 

6、清除浮动

.clearfix{
                *zoom:1
            }
            .clearfix:after{
                content: "";
                display: block;
                clear: both;
            }