布局技巧

发表于

Sticky footers 布局：页面内容不够长的时候，页脚固定在视窗底部，如果内容够长时页脚底部会被内容向下推送

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="container">
  
  <div class="wapper clearfix">
    <div class="wapper-main">
      <p>文字文字文字文字文字文字</p>
      <p>文字文字文字文字文字文字</p>
      <p>文字文字文字文字文字文字</p>
      <p>文字文字文字文字文字文字</p>
      <p>文字文字文字文字文字文字</p>
      <p>文字文字文字文字文字文字</p>
      <p>文字文字文字文字文字文字</p>
      <p>文字文字文字文字文字文字</p>
      <p>文字文字文字文字文字文字</p>
      <p>文字文字文字文字文字文字</p>
    </div>
  </div>
  <div class="close"> ×关闭 </div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
.wapper{
  min-height:100%
}
.wapper-main{
  padding-bottom:64px;
}
.close{
  margin:-64px auto 0;
  clear:both;
  font-size:32px; 
}

js技巧

获取地址栏参数的方法

1
2
3
4
5
6
7
//获取地址栏参数的方法
function GetQueryString(name)
{
   var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
   var r = window.location.search.substr(1).match(reg);
   if(r!=null)return  unescape(r[2]); return null;
}

border 1像素边框实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="border-1px"></div>
.border-1px{
  position: relative;
}
.border-1px :after{
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #ccc;
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){
  .border-1px::after{
    -webkit-transform: scaleY(0.7)
    transform: scaleY(0.7)
  }
}
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
  .border-1px::after{
    -webkit-transform: scaleY(0.5)
    transform: scaleY(0.5)
  }
}

背景图标在不同dpi下加载不同的倍数的图片

1
2
3
@media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){
  .brand{ background-image: url(../../assets/brand@3x.png)!important;}
}