移动端布局心得

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宽度为固定指，剩余间距平分

等分的文章