移动Web实训DAY-1

1. 尺寸不同：
   • PC屏幕大，移动端屏幕小
2. 内容位置不同：
   • PC端内容在版心
   • 移动端内容铺满屏幕的，占屏幕宽度的100%
3. 总结：
   • 通过比较不同点，我们就认识到了，不同的移动端，屏幕宽度不同
   • 将来需要做移动端Web页面的适配（核心）
     

1. 作用：可以很方便的模拟出不同移动端设备，进行代码和效果调试

即像素格数

1. 为什么要了解设备分辨率？

   • 不同的设备分辨率不相同的，为了知道将来开发参照什么分辨率写代码，需要了解分辨率

2. 屏幕尺寸：

   • 屏幕对角线的距离，单位英寸

3. 屏幕分辨率：

   1. 物理分辨率
      • 设备出厂的分辨率，属于硬件层面，不能改
   2. 逻辑分辨率
      • 通过系统的驱动去缩放之后的分辨率，可以修改
   3. 开发时，参照那种分辨率？
      • 逻辑分辨率

1. 概念：

   • 网页的可视区域
     

2. 开发中，网页的宽度需要跟设备的逻辑像素宽度一致，如何实现？

1. 设计师为什么要设计二倍图？

   • 保证图片放在不同的屏幕上时，不会模糊

2. 前端开发者，写代码参照哪个分辨率？

   • 逻辑分辨率（对应的就是一倍图）

1. 效果：

   • 宽度自适应，高度固定

   • 宽度使用百分比的方式自适应

     .toolbar li {
       float: left;
       
       width: 20%;
       
       height: 50px;
     }
     

1. 作用：
   • 基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
   • Flex布局非常适合结构化布局
2. 设置方式：
   • 父元素添加 display: flex;
3. 组成部分：
   1. 弹性容器
   2. 弹性盒子
   3. 主轴
   4. 侧轴

display: flex;




justify-content: flex-start; 


justify-content: flex-end; 


 justify-content: center; 
 

 justify-content: space-around; 
 

 justify-content: space-between; 
 

justify-content: space-evenly;

效果：

justify-content: center; 沿着主轴方向居中排列，没有间距

justify-content: space-around; 沿着主轴方向，每个盒子都有相同的左右间距

justify-content: space-between; 沿着主轴方向，最左和最右的盒子紧贴着父级的左右，间距平局分配给其他盒子

justify-content: space-evenly; 沿着主轴方向，每个弹性盒子间距相同的