前端基础-移动开发之流式布局

前言

由于最近忙了两天，忘了更新了。前面说了视口的概念，这篇说一下移动开发中的技术选型。

常见布局方式

在移动端开发中，有两种方案，一种是占主流的方案，也就是单独制作移动端页面，其次就是响应式页面兼容移动端，这种就需要处理比较多的兼容问题，毕竟是PC和移动端共用一套页面。

针对每种方案，有着不一样的技术选型

• 单独制作移动端页面

• 流式布局（百分比布局，也就是我们这篇要讲的）

• flex弹性布局

• less+rem+媒体查询布局

• 混合布局（同时使用上面三种布局）

• 响应式页面

• 媒体查询

• Bootstrap框架

这篇专门说一下流式布局

概念

流式布局，也称百分比布局，非固定像素布局；

原理

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

div {
   width: 100%;
}

注意事项

在流式布局的制作过程中，需要定义页面的最大宽度和最小宽度

body {
   min-width: 320px;
   max-width: 540px;
}

常用初始化样式

再说一下移动端常用的初始化样式，和PC端一样，在开发PC端页面时，会使用reset.css。而在开发移动端的时候，则不会使用reset.css，而是又更好的解决方案，那就是normalize.css。

可以直接从github上下载normalize.css，而且它也有自己的文档说明

创造normalize.css有下面这几个目的：

• 保护有用的浏览器默认样式而不是完全去掉它们
• 一般化的样式：为大部分HTML元素提供
• 修复浏览器自身的bug并保证各浏览器的一致性
• 优化CSS可用性：用一些小技巧
• 解释代码：用注释和详细的文档来

这些在文档中都写了，还有和reset.css的对比，感兴趣的话可以自己阅读了解一下

结尾

流式布局就说这么多，掌握基础用法。下一篇会讲flex布局，篇幅应该会较长。