移动端有哪些常见布局方式？

 大家好，我是IT修真院深圳分院第九期的学员徐炜，一枚正直、纯洁、善良的前端程序员。

 今天给大家分享一下，修真院官网css任务13，深度思考中的知识点——移动端有哪些常见布局方式？

 1.背景介绍

 随着智能手机的普及以及社会的发展，传统的网站布局已经无法适应现状，我们编写的网页不仅仅要展示在电脑上， 也要展示在移动设备上，而移动设备种类繁多，苹果、小米、三星等等，各个手机的屏幕大小不一，一般的电脑端的页面布局在手机上无法完全适应，那么如何让一个页面匹配各个页面呢？ 现在我们来看看下面的几种布局方式。

 2.知识剖析

 1>.固定布局

 固定布局是第一次做移动端时最好的选择方式,思路沿用PC端,上手比较快。在标签里把 viewport 加好,然后设想整个网页的宽度为 320px 即可。 其他地方根据 PC 端来布局。 缺点:大屏手机显示网页比较宽,固定布局宽度参照永远是 320px,导致左右两 边会有空白。

 演示demo

 2>.流动布局