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"/>
8.//很关键,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制
box-sizing: border-box;
9.手机端的html要加这个:
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />