移动Web开发
现如今，PC端网页已经不能满足于人们日常生活的便捷了，应运而生的移动端网页自然而然也变得更加受人青睐；毕竟曾有言：“ 有人或许不会使用电脑，但是大部分人都会使用手机 ”；
所以，从今儿开始，就打算进军学习移动端Web的开发啦！！！
那么今天所要介绍的内容就是：
一、移动端特点
二、旧布局——流式布局
三、新布局——Flex布局
文章目录
一、前言
既然是需要开发 移动端Web ，那么首先需要了解的就是 移动端Web开发 和 PC端Web开发 的不同？如何开发移动端Web？在什么软件上进行开发？
其实，就移动端和PC端而言，最大的不同就是设备的不同，由于设备不同，自然也就代表着宽高比例以及兼容性也不相同，所以在很多企业项目开发的过程中，都会将PC端网页和移动端网页进行分开开发；
那么，开发移动端Web要做的就是需要合理的开发布局了，在开发的过程中，使用怎样的布局是会直接影响到用户体验以及产品生存空间的，所以在 该如何开发移动端Web 的问题上，怎么样使用便捷，怎么样使用更加快速，怎么样开发效果更美观就成了最该做的；
但是，开发移动端Web也并非需要更换软件开发，毕竟那样对一个开发团队来说，属实是开发的成本太大；所以，移动端Web的开发依然使用 原有的开发工具 和 Chrome调试工具 ；
这些就是我在经过移动端Web学习之后，总结出来的个人观点，希望可以帮助大家理解。
二、移动端特点
相比于PC端网页，手机端网页所适应的屏幕较小， 网页宽度多数都为100%占比，而PC端网页屏幕较大，网页固定拥有版心部分；
所以，手机端网页和电脑端网页通常就是两个不同的网站，是分开进行开发的；
1. 调试工具
使用 谷歌模拟器 调试移动端网页，然后【刷新】查看：
此时此刻就属于移动端Web的界面了，这一步对开发移动端Web来说，是至关重要的，这样也方便开发者对于前端样式的调整；
2. 分辨率
在了解分辨率之前，最先需要了解的就是屏幕尺寸，毕竟它与设备显示器的分辨率关系密切，那么基本的屏幕尺寸是怎样定义的呢？
2.1 屏幕尺寸
指的是屏幕对角线的长度，一般用 英寸 来度量，具体操作如图所示：
2.2 物理分辨率
物理分辨率是生产屏幕时就固定的，它是不可被改变的，如图所示：
2.3 逻辑分辨率
逻辑分辨率是由软件（驱动）决定的，可以缩放调节的分辨率，如图所示：
注意：制作网页参考的是设备的逻辑分辨率；
2.4 移动Web开发参考分辨率
注意：在Chrome浏览器中，选择iPhone SE也有同iPhone6/7/8一样的逻辑分辨率；
3. 视口
使用meta标签设置视口的宽度，主要的目的是为了制作适配不同设备宽度的网页；
其中，网页的宽度和逻辑分辨率尺寸相同；
代码段：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
① viewport：视口；
② width=device-width：视口宽度 = 设备宽度；
③ initial-scale=1.0：缩放1倍（不缩放）；
4. 二倍图
现如今写网页常以二倍图居多，当然也包括多倍图；在项目开发用到的【像素大厨】中，多以二倍图来进行元素的测量，如图所示：
三、旧布局——流式布局
在网页过去开发布局中，多以 流式布局 为主；流式布局又称为 百分比布局 ，其效果实现主要是：宽度自适应，高度固定 ；
但现如今，由于Flex布局的出现，流式布局也逐渐被市场淘汰
四、新布局——Flex布局
1. Flex布局
在处理多个盒子横向排列的问题时，经常会使用到的属性就是 浮动 ，而在处理盒子之间的间距时，通常使用的又有 margin ；可浮动终究很难避免 的还是脱标 的问题；
而为了解决这一问题，Flex布局就是最好的选择，Flex布局又称 弹性布局 ：
- 是一种浏览器提倡的布局模型；
- 布局网页更简单、灵活；
- 避免浮动脱标的问题；
优点：由于是浏览器所提倡的布局模型，使用和浏览的兼容性问题处理的就很好，因此运行速度也会更快。
注意：移动端Web开发是可以随便使用的，但是在PC端Web开发过程中，需要先了解软件或者网站是否需求在IE低版本运行，如果需要，就不能使用Flex布局了；
这里拓展一个链接，专门用于搜索所使用的技术栈是否被各种主流浏览器支持，查询请点击 ；
其中绿色代表完全支持；红色代表完全不支持；不过一般只有政府或者银行开发Web项目才会要求兼容IE浏览器的
2. 布局模型构成
效果：
① 子级一行排列/水平排列；
② 默认主轴在水平, 弹性盒子都是沿着主轴排列；
注意：主轴方向改变了，那么弹性盒子布局也就改变了；
作用：
① 基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。；
② Flex布局非常适合结构化布局；
设置方式：
① 父级元素（父元素必须是亲爹）添加 display: flex；
② 子元素可以自动的挤压或拉伸；
组成部分：
① 弹性容器（父级）
② 弹性盒子（子级）
③ 主轴（可更改）
④ 侧轴 / 交叉轴（可更改）
3. 主轴对齐方式
修改主轴对齐方式的属性：justify-content ；
在Flex布局模型中，往往通过调节主轴或侧轴的对齐方式来设置盒子之间的间距；
| 属性值 | 作用 |
|---|---|
| flex-start | 默认值, 起点开始依次排列 |
| flex-end | 终点开始依次排列 |
| ⭐center | 沿主轴居中排列 |
| ⭐space-around | 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧 |
| ⭐space-between | 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间 |
| ⭐space-evenly | 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等 |
4. 侧轴对齐方式
修改侧轴对齐方式属性:
① align-items：添加到弹性容器（在父级添加）；
② align-self： 控制某个弹性盒子在侧轴的对齐方式，添加到弹性盒子（在子级添加）；
| 属性值 | 作用 |
|---|---|
| flex-start | 默认值, 起点开始依次排列 |
| flex-end | 终点开始依次排列 |
| ⭐center | 沿侧轴居中排列 |
| ⭐stretch | 默认值, 弹性盒子沿着主轴线被拉伸至铺满容器 |
5. 伸缩比
① 属性：flex : 值；
② 取值分类：
- 数值(整数);
注意：只占用父盒子剩余尺寸的份数；
6. 主轴方向
修改主轴方向属性: flex-direction
| 属性值 | 作用 |
|---|---|
| row | 行, 水平(默认值) |
| ⭐column | 列, 垂直 |
| row-reverse | 行, 从右向左 |
| column-reverse | 列, 从下向上 |
注意：
① 主轴默认是水平方向，主轴方向发生改变，那么弹性盒子布局也会发生改变；
② 当主轴改变为列的时候，侧轴就自动改为行；
7. 盒子换行
弹性盒子换行属性 : flex-wrap;
| 属性值 | 作用 |
|---|---|
| nowrap | 默认值, 不换行 |
| ⭐wrap | 换行 |
总结
以上内容主要介绍了移动Web端网页开发的属性，当然其属性也适用于PC端网页的开发，只不过需要先确定浏览器是否兼容，兼容的话才可以使用哦！
以上就是所要介绍的移动端Web基础学习的第一节内容，后续即将更新移动端Web学习目标。感谢关注和支持，让我们一起成长！
有兴趣可回顾一下CSS进阶学习的文章内容，再结合之前所介绍的CSS基础学习，大脑里的内容会更加丰富而充实的，毕竟综合性复习和学习是更会加深印象的哟！！！