移动web开发01

今天移动web开发学完了，整理一下思路，移动web首先学习的就是就是flex布局。记录一下flex布局和移动适配的一些知识。

Flex布局原理

 Flex布局原理就是：给父盒子添加flex属性，来控制子盒子的位置排列方式从而实现flex布局。

当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和vertical-align 属性将失效。

Flex布局又叫伸缩布局、弹性布局、伸缩盒布局、弹性盒布局、flex布局。

Flex布局常见属性

justify-content属性

设置主轴子元素排列

flex-start 所有子元素在主轴头部显示
flex-end 所有子元素在主轴尾部显示
flex-center 所有子元素在主轴居中对齐
space-around 所有子元素平分剩余空间
space-between 所有子元素先两边贴边在平分剩余空间

flex-wrap

子元素是否换行默认不换行，wrap换行。

align-items

设置侧轴子元素排列

align-items的值为center 表示居中显示

align-items的值为stretch 会将子元素拉伸

align-self

控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

flex属性

给子盒子添加，属性值跟数字。

flex-direction

改变元素排列方向

row   改成x 默认值

column   改成y

移动适配

移动适配使用的两种类型的单位，rem和vw/vh。

rem

是一个相对单位，1rem为1html字号大小

rem使用

使用媒体查询设置差异化CSS样式

@media (媒体查询) {
            选择器 {
                属性
            }
        }

rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10

        @media (width:320px) {
            html {
                font-size: 32px;
            }
        }

        @media (width: 375px) {
            html {
                font-size: 37.5px;
            }
        }
        @media (width: 414px) {
            html {
                font-size: 41.4px;
            }
        }

rem单位的尺寸 = px单位数值 / 基准根字号，一般情况都是设计稿尺寸除于37.5得到几个rem

vw / vh

是一个相对单位，相对视口的尺寸计算结果vw：viewport widthl  ，vh：viewport height
1vw = 1/100视口宽度
1vh = 1/100视口高度

vw的好处自动是视口宽度的1/100 自动计算不需要在引入额外js，不过又移动兼容性问题

设计稿一般是375px，1vw就是3.75px

flexible

移动设备视口宽度很多，我们不能一个一个使用媒体查询，我们使用flexible配合rem使用

flexible.js是手淘开发出的一个用来适配移动端的js框架。
核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。

在body结束标签上门引入flexible.js

项目地址

https://github.com/amfe/lib-flexible