移动端布局笔记

页面样式：

基本代码：

<div class="swiper-container" id="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide page page1" >
<div class="pageInr">
<div class="elm elm1">
<input type="text" class="userName">
<input type="text" class="userPsw">
</div>
<div class="elm elm2"></div>
</div>
</div>
</div>
</div>

页面有表单：

思路：

1.切纯背景图放在page1的css中，background:#231c84 url(../images/bg.jpg) no-repeat bottom; 

2.切表单部分以上的图（见图片恭喜你部分）放在pageInr的css中，background: url(../images/form.png) no-repeat top;

3.切表单部分的图放在elm1的css中：

.page1 .elm1{
left:0px;
top:683px; 
width:750px; 
height:150px; 
position:relative;
background: url(../images/p15Inp.png);
}

4.两个input表格定位到elm1图中的对应位置，background设为none;

5.表单下面按钮部分的图放在elm2的css中

有二维码：

思路：

1.切纯背景图放在page1的css中，background:#231c84 url(../images/bg.jpg) no-repeat bottom; 

2.二维码部分的图片放在HTML的img标签中,img标签放在elm1中

3.按钮部分思路与有表单页面一样

没有表单没有二维码没有动画，单纯页面：

思路：

1.切整个设计稿，直接放在放在page1的css中，background:#231c84 url(../images/bg.jpg) no-repeat bottom; 即可

/*--------------------------------------------2017.6.15--------------------------------------------------*/

昨天做了个项目，最初设计稿高度是1330，内容区域是1220，这样的话做项目时就导致，内容区域（切成背景图）在有些手机上显示不完全。。。

最开始考虑改稿。。。但是尺寸拿不准，就试了一下980，发现在各种手机上都会显示下方一大块空白。

后来经过研究找到两个解决方案：

1.改稿的情况：

将稿的内容区域限制在1200以内即可

2.不改稿的情况：

因为一般来说稿的内容区域距离稿的顶部会有一些空间，我们可以利用这个空间来做些文章，

我们将背景图所在元素添加以下class，这样背景图就会被向上偏移，这样之前会被手机遮挡的内容区域就可以显示出来了（PS：此方法在有些大（华）屏（为）手机上内容区还是会被遮挡，所以尽量能改稿就改稿吧~~~）

.page{
    background-position: center -50px!important;
    background-repeat: no-repeat!important;
    background-size: 100%!important;
}