移动WEB的页面布局

        随着移动互联网的日益普遍，现在移动版本的web应用也应用而生，那么在做移动web页面布局的过程中，应该注意哪些要点呢？现把个人的一些学习经验总结如下：

要点一、piexl

  1px = 2dp
  dp dpr dpi ppi

要点二、viewport

  ios的viewport为980px
  布局：layout viewport
  视图：visual viewport
    meta标签：语法 <meta name="viewport" content="name=value, name=value">
    width: 设置布局viewport的特定值（“device-width”）
    initial-scale: 设置页面的初始缩放 （“1”）
    minimum-scale: 最少缩放
    maximum-scale: 最大缩放
    user-scalable: 用户能否缩放（“no”）
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

要点三、Flexbox弹性盒子布局

• 如何使用flexbox布局：

display: -webkit-flex: 标识使用弹性布局

flex: num 占容器的比例

• 日常编程中常遇到的案例:

不定宽高的水平垂直居中

传统布局==> position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%);

flexbox==> justify-content: center; align-items: center; display: -webkit-flex;

• flexbox的兼容性：

IOS 可以使用最新的flex布局

android4.4以下, 只能兼容旧版的flexbox布局

android4.4及以上，可以使用最新的flex布局

要点四、响应式布局

•   媒体查询
•   百分比布局
•   弹性图片：max-width: 100%
•   重新布局，显示与隐藏

要点五、移动web特别样式处理

•   高清图片的处理方案

    在移动web页面上渲染图片，为了避免图片产生模糊，图片的宽高应该用物理像素单位渲染，即是100*100的图片，应该使用100dp*100dp。
    width: (w_value/dpr) px;
    height: (h_value/dpr) px;

•   一像素边框

    根本原因：1px使用2dp渲染
    实现方案：使用元素伪类的方法，以li元素为例  

 li.before {
   position: absolute;
   top: -1px;
   left: 0;
   content: '';
   width: 100%;
   height: 1px;    
   border-top: 1px solid #ddd;
   -webkit-transform: scaleY(0.5);
 }

•   相对单位rem

    em: 是根据父节点的font-size为相对单位，但是在多层嵌套下，变得非常难以维护
    rem: 是根据html的font-size为相对单位，和em相比，rem更能作为全局统一设置的度量单位

    rem = screen.width / 20
    比如：

// 默认320px
html {font-size: 32px;}
 
// iphone6
@media (min-device-width: 375px) {
  html {font-size: 37.5px;}
}
 
// iphone6 plus
@media (min-device-width: 414px) {
  htmlfont-size: 41.4px;}
}

    不使用rem的情况: font-size

•   文本溢出

// 单行文本溢出
.inaline {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

// 多行文本溢出
.intwoline {
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

要点六、Tap基础事件
要点七、Touch基本事件
要点八、弹性滚动

 

持续更新中......