1.文字自然展开

text-align-last: justify;

2.图片水平垂直居中不变形

<div style="display: table-cell;vertical-align: middle;text-align: center; width: 96px; height: 96px;">

<img style="max-width: 100%; max-height: 100%; margin: auto;" src=""/>

3.文字超过一定宽度，自动省略。手机端上width可以使用em,rem来代替px

.text{

width: 3rem;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

}

<h4 class="text"></h4>

4.css计算

height: calc(100% - 100px - 20px);

5.图文并排

<div style="display: flex;">

<div style="-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;">

6.以后手机端涉及到滚动条的都要加上这个属性

-webkit-overflow-scrolling: touch;

7.//object-fit属性可以做到像小程序图片mode属性那样的缩放裁剪，也可以用于视频

.imgBox{width:5rem;height:5rem;}

.img{width: 100%;height:100%;object-fit: cover;}

<div style="imgBox">

          <img src="http://img2.imgtn.bdimg.com/it/u=2013648924,4026080748&fm=26&gp=0.jpg"/>

9.手机端的html要加这个：

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