移动Web-移动端特点+百分比布局+Flex布局

移动端特点

PC端网页和移动端网页的有什么不同?

PC屏幕,网页固定版心
Ø 手机屏幕, 网页宽度多数为100%
l 如何在电脑里面边写代码边调试移动端网页效果?
Ø 谷歌模拟器

谷歌模拟器

目标:使用谷歌模拟器调试移动端网页

目标:了解屏幕尺寸概念概念

屏幕尺寸
Ø 指的是屏幕对角线的长度,一般用英寸来度量

l PC分辨率
Ø 1920 * 1080
Ø 1366 * 768
Ø ……
l 缩放150%
Ø (1920/150%)*(1080/150%)
l 总结
Ø 硬件分辨率(出厂设置)
Ø 缩放调节的分辨率(软件设置)

目标:了解移动端主流设备分辨率

分辨率分类
Ø 物理分辨率是生产屏幕时就固定的,它是不可被改变的
Ø 逻辑分辨率是由软件(驱动)决定的

l 思考:制作网页参考物理分辨率还是逻辑分辨率?
Ø 逻辑分辨率

目标:了解移动端主流设备分辨率

重点:iphone6/7/8 逻辑分辨率375*667 2:1  

目标:使用meta标签设置视口宽度,制作适配不同设备宽度的网页

l 手机屏幕尺寸都不同, 网页宽度为100%
l 网页的宽度和逻辑分辨率尺寸相同。

思考:默认情况下,网页的宽度和逻辑分辨率相同吗?
Ø 不同, 默认网页宽度是980px。

l 目标:网页宽度和设备宽度(分辨率)相同。
l 解决办法:添加视口标签。
l 视口:显示HTML网页的区域,用来约束HTML尺寸。

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

 

 

l viewport:视口
l width=device-width:视口宽度 = 设备宽度
l initial-scale=1.0:缩放1倍(不缩放)

二倍图

目标:能够使用像素大厨软件测量二倍图中元素的尺寸

l 现阶段设计稿参考iPhone6/7/8,设备宽度375px产出设计稿。
l 二倍图设计稿尺寸:750px

百分比布局

目标: 能够使用百分比布局开发网页

l 百分比布局, 也叫流式布局
l 效果: 宽度自适应高度固定

Flex布局

目标: 能够使用Flex布局模型灵活、快速的开发网页

l 思考
Ø 多个盒子横向排列使用什么属性?
Ø 浮动
Ø 设置盒子间的间距使用什么属性?
Ø margin
Ø 需要注意什么问题?
Ø 浮动的盒子脱标

l Flex布局/弹性布局:
Ø 是一种浏览器提倡的布局模型
Ø 布局网页更简单灵活
Ø 避免浮动脱标的问题

l 作用
Ø 基于 Flex 精确灵活控制块级盒子的布局方式,避免浮动布局中脱离文档流现象发生。
Ø Flex布局非常适合结构化布局
l 设置方式
Ø 父元素添加 display: flex必须是父级元素),子元素可以自动的挤压或拉伸

l 组成部分
Ø 弹性容器
Ø 弹性盒子
Ø 主轴
Ø 侧轴 / 交叉轴

目标:使用justify-content调节元素在主轴的对齐方式

l 思考:网页中,盒子之间有距离吗?
l 答:有。
Ø 在Flex布局模型中,调节主轴或侧轴的对齐方式来设置盒子之间的间距。

修改主轴对齐方式属性: justify-conten

侧轴的对齐方式align-items

目标:使用align-items调节元素在侧轴的对齐方式
l 修改侧轴对齐方式属性:
Ø align-items(添加到弹性容器)
Ø align-self: 控制某个弹性盒子在侧轴的对齐方式(添加到弹性盒子/子集)单独控制某个盒子侧轴对齐方式。
修改某个盒子言侧轴对齐的方式:align-self(添加到子集css样式里面)
弹性布局:如果弹性盒子没有宽,则按照内容的大小撑开,如果没有高度,则会默认拉伸到和父级一样高。

伸缩比

目标:使用flex属性修改弹性盒子伸缩比

l 属性
Ø flex : 值;
l 取值分类
Ø 数值(整数)
注意 : 只占用父盒子剩余尺寸

.box div:nth-child(1) {
            width: 50px;
        }
 .box div:nth-child(2){
            flex: 1;
        }
        .box div:nth-child(3){
            flex: 1;
        }
//意思为,子集1的宽度为50,子集2的尺寸的宽度为父级盒子减去子集1的宽度,剩余的部分分为两份,子集2占一份,子集3占一份。
 .box div:nth-child(2){
            flex: 1;
        }
        .box div:nth-child(3){
            flex: 4;
        }
//其含义为:将父级剩余的尺寸分为五份,子集三占四分,子集二占一份。

 

这样的好处是,不论父级的宽度如何变化,其子集的宽度会自动进行变化。

flex容器属性:flex-flow,place-content(主轴剩余空间的项目分配),place-items项目在交叉轴的对齐方式

flex项目属性:order默认为0,数字越小项目越靠前

 

版权声明:
作者:zhuim521
链接:https://zhuimwl.com/65.html
来源:追梦博客
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
海报
移动Web-移动端特点+百分比布局+Flex布局
移动端特点 PC端网页和移动端网页的有什么不同? PC屏幕大,网页固定版心 Ø 手机屏幕小, 网页宽度多数为100% l 如何在电脑里面边写代码边调试移动端网页效果……
<<上一篇
下一篇>>