移动web第三天

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

PC端网页和移动端网页的有什么不同？
PC屏幕大，网页固定版心
手机屏幕小， 网页宽度多数为100%
如何在电脑里面边写代码边调试移动端网页效果？

谷歌模拟器

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

1.png

屏幕尺寸

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

2.png

分辨率

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

分辨率分类

物理分辨率是生产屏幕时就固定的，它是不可被改变的
逻辑分辨率是由软件（驱动）决定的

总结

硬件分辨率（出厂设置）
缩放调节的分辨率（软件设置）

视口

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

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

思考：默认情况下，网页的宽度和逻辑分辨率相同吗？

不同， 默认网页宽度是980px。

视口标签

viewport：视口
width=device-width：视口宽度 = 设备宽度
initial-scale=1.0：缩放1倍（不缩放）

3.png

二倍图

目标：能够使用像素大厨软件测量二倍图中元素的尺寸
1、图片分辨率, 为了高分辨率下图片不会模糊失真
2、现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿。
3、二倍图设计稿尺寸：750px。

4.png

百分比布局

目标： 能够使用百分比布局开发网页
1、百分比布局， 也叫流式布局
2、 效果： 宽度自适应，高度固定

Flex布局

注意：弹性布局相对于浮动布局

能不能用点位？可以
能不能用tf转换？可以
浮动不会跟df一起使用
基础班学的属性,除了浮动不能配合df使用外,其他的都可以配合使用
1.没有需要清除浮动影响
2.布局网页更简单、灵活、没有脱标
添加弹性布局 display:flex; df
弹性容器 display:flex;：
默认宽度和父元素宽度一样，默认的高度由内容所撑开
弹性盒子：弹性容器的最近一级子元素（亲儿子元素）
1.默认的宽度由内容所撑开，默认的高度为父元素的高度（侧轴方向默认是拉伸）
2.所有标签都没有没有块级，行内，行内块元素之分，统统都是弹性盒子（可以设置宽高，一行显示多个）
3.默认不换行，宁愿牺牲自己的宽度，都不会自动还行
目标： 能够使用Flex布局模型灵活、快速的开发网页

1、 思考

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

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

2、Flex布局/弹性布局：

是一种浏览器提倡的布局模型
布局网页更简单、灵活
避免浮动脱标的问题
3、Flex布局模型构成
目标：能够使用Flex布局模型灵活、快速的开发网页

作用

基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
Flex布局非常适合结构化布局
设置方式
父元素添加 display: flex，子元素可以自动的挤压或拉伸
组成部分
弹性容器
弹性盒子
主轴

5.png

主轴对齐方式

目标：使用justify-content调节元素在主轴的对齐方式
思考：网页中，盒子之间有距离吗？
答：有。
在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距

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

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

6.png

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

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

7.png

侧轴对齐方式

目标：使用align-items调节元素在侧轴的对齐方式

修改侧轴对齐方式属性:

align-items（添加到弹性容器）

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

8.png

伸缩比

目标：使用flex属性修改弹性盒子伸缩比
属性
flex : 值;
取值分类
数值(整数)
注意 : 只占用父盒子剩余尺寸

9.png