移动端常见布局

移动端单独制作

1、流式布局（百分比布局）

流式布局：就是百分比布局，也称为非固定像素布局。通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。流式布局的方式是移动web开发使用的比较常见的布局方式。

2、flex 弹性布局（可参照之前的常见的弹性盒子布局）

3、less+rem+媒体查询布局

①假设设计稿是750px。

②假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）。

③每一份作为html字体大小，这里就是50px。

④那么在320px设备的时候，字体大小为320/15就是 21.33px。

⑤用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的。

⑥比如我们以750为标准设计稿。

⑦一个100100像素的页面元素在 750屏幕下， 就是 100/ 50 转换为rem 是 2rem2rem 比例是1比1。

⑧320屏幕下， html字体大小为21.33 则 2rem= 42.66px 此时宽和高都是 42.66 但是宽和高的比例还是 1比1。

⑨但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果。

总的来说：

①最后的公式：页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）。

②屏幕宽度/划分的份数就是 htmlfont-size 的大小。

③或者：页面元素的rem值 = 页面元素值（px） / html font-size 字体大小。

4、混合布局

根据实际情况灵活运用以上三种布局方式。

响应式

1、媒体查询

媒体查询（Media Query）是CSS3新语法。

• 使用 @media查询，可以针对不同的媒体类型定义不同的样式。

• @media 可以针对不同的屏幕尺寸设置不同的样式。

• 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

• 目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询。

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 60px;
}

@media screen and (min-width:0px) and (max-width:320px) {
    html {
        font-size: calc(320px / 15);
    }
}

@media screen and (min-width:321px) and (max-width:360px) {
    html {
        font-size: calc(360px / 15);
    }
}

@media screen and (min-width:361px) and (max-width:375px) {
    html {
        font-size: calc(375px / 15);
    }
}

@media screen and (min-width:376px) and (max-width:384px) {
    html {
        font-size: calc(384px / 15);
    }
}

@media screen and (min-width:385px) and (max-width:400px) {
    html {
        font-size: calc(400px / 15);
    }
}

@media screen and (min-width:401px) and (max-width:414px) {
    html {
        font-size: calc(414px / 15);
    }
}

@media screen and (min-width:415px) and (max-width:424px) {
    html {
        font-size: calc(424px / 15);
    }
}

@media screen and (min-width:425px) and (max-width:480px) {
    html {
        font-size: calc(480px / 15);
    }
}

@media screen and (min-width:481px) and (max-width:540px) {
    html {
        font-size: calc(540px / 15);
    }
}

@media screen and (min-width:541px) and (max-width:720px) {
    html {
        font-size: calc(720px / 15);
    }
}

@media screen and (min-width:721px) and (max-width:750px) {
    html {
        font-size: calc(750px / 15);
    }
}

2、bootstrap（详情内容请参照下一篇bootstrap）