css|移动端常见布局 html5|html

移动端单独制作 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）
【css|移动端常见布局】