Day03-移动端布局

• 一、移动端的特点
• • 1.1 移动端和PC端 页不同点
  • 2.1 谷歌模拟器
  • 3.1 分辨率
  • 4.1 视口
  • 5.1 二倍图
• 二、百分比布局
• 三、Flex布局
• • 1.1 目标： 能够使用Flex布局模型灵活、快速的开发 页
  • 2.1 目标：使用justify-content调节元素在主轴的对齐方式
  • 3.1 使用align-items调节元素在侧轴的对齐方式
  • 4.1 伸缩比
• 四、实战演练–小兔鲜儿 – 确认订单

一、移动端的特点

1.1 移动端和PC端 页不同点

PC端 页和移动端 页的有什么不同br> 1.PC屏幕大， 页固定版心
2.手机屏幕小， 页宽度多数为100%

如何在电脑里面边写代码边调试移动端 页效果br> 谷歌模拟器

2.1 谷歌模拟器

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

缩放150%：（1920/150%）*（1080/150%）

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

4.1 视口

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

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

二、百分比布局

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

百分比布局， 也叫流式布局
效果： 宽度自适应，高度固定。