1、viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2、百分比
移动端使用百分比很重要
3、单位 rem vh vw 的使用
4.flex
弹性布局在移动端常用
5.fixed
css3的transform
等给我们带来了fixed的相对定位问题,其次虚拟键盘的弹出也给fixed制造出各种bug
一般android采用fixed布局,ios采用absolute
,然后中间滚动使用-webkit-overflow-scrolling: touch;
。
如果还不行就具体问题具体分析。
6.使用媒体查询 @media
@media screen and (max-width: 320px) {
body {
background-color:red;
}
}
7.图片高度占位
跟pc的不一样,移动端的图片很多都不是固定的宽高的,所以就面临一个问题:不能设置一个具体的高度,于是就会出现加载过程其他内容随着图片的加载慢慢向下移动。
那如何解决这个问题呢?
给图片提供一个容器,设置高度为0
,根据宽度按照图片的比例使用padding-top
得到一个高度值,然后图片绝对定位设置宽高为100%
即可,如图片尺寸为200*100
(则高度为宽度的二分之一):
.img-wrap{ position: relative; height: 0; padding-top: 50%;// 图片宽度的一半 }
.img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
8.等分
有几种情况:
- 不考虑间距,
item
等分 - 间距为固定值如
20px
,剩余宽度item
等分 item
宽度为固定指,剩余间距平分