移动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

 

 

作者:Lu
链接:https://llxx.cc/mobile-web-01/
来源:Lu's Blog

THE END

打赏
< <上一篇
下一篇>>
文章目录
关闭
目 录