陈紫怡-20221025-移动端流式布局和flex布局1

一、今日学习内容：

• 移动端的调试方法
  
  • Chrome DevTools 谷歌模拟手机调试（常用）
    
  • 直接搭建本地web服务器，手机访问即可
    
  • 直接用外网服务器，用IP来进行访问
    
• 视口
  
  • 什么是视口（viewport）
    
    • 视口就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口，视觉视口和理想视口
      
  • 布局视口（Layout viewport)
    
    • 一般移动端的浏览器都默认设置了一个布局视口，用于解决pc端页面在手机上的显示问题，基本这个视口的分辨率是980px，所以PC端大多都能在手机上展现，但是元素看上去非常小，可以手动进行缩放
      
  • 视觉视口（Visual vieaport)
    
    • 用户正在看到的得网站区域，操作视觉视口时，不会影响布局视口
      
  • 理想视口(Ideal viewport)
    
    • 为了使网站在移动端有最理想的浏览和阅读宽度而设定的
      
    • 理想视口是设备最理想的视口尺寸
      
    • 需要使用meta视口标签来通知浏览器进行操作
      
    • 理想视口就是将布局视口的宽度修改为视觉视口的宽度
      
  • 物理像素和物理像素比
    
    • 物理像素值得是屏幕显示的最小颗粒，是物理上真是存在的，在设备出厂时就设置好的，比如：iPhone6：  750x1334
      
    • 开发的时候用的单位1px，1px不一定等于一个物理像素
      
    • 一个px能显示的物理像素点的个数，就叫物理像素比
      
    • 如果把一张100x100的图片放到手机里面，会按照物理像素比进行缩放
      
    • 物理像素比的计算方式
      
      • 用设备的物理像素分辨率/开发尺寸（分辨率）即可，
        
      • 比如iPhone6的屏幕尺寸 750x1334 ，开发尺寸为375x667 ，所以物理像素比就是2
        
  • 多倍图
    
    • 对于一张50px*50px的图片，在手机上打开，按照2倍的物理像素比，会将图片进行放大从而变模糊
      
    • 处理方式
      
      • 1、将一个在PC端是100px*100px的图片先缩小为50px*50px
        
      • 2、将图片在移动端进行导入即可
        
• 背景缩放
  
  • 属性：
    
    • background-size：背景图片的宽度   背景图片的高度；
      
  • 单位：
    
    • 长度/百分比/cover/contain
      
• 移动端开发选择及技术方案
  
  • 移动端的主流方案
    
    • 1、单独制作移动端页面（主流）
      
      • 通常情况下，网站前会加m（mobile）
        
      • 打开设备时，自动进行判断，如果是PC端就显示PC端的网站，如果是移动端设备，就跳转到移动端页面
        
      • PC端和移动端是两套页面
        
    • 2、响应式网站
      
      • PC端和移动端共用一套网站，在不同屏幕下，网页的样式会自动进行适配
        
  • 移动端的技术解决方案
    
    • 1、移动端的浏览器兼容性问题
      
      • 国内浏览器基本都是一webkit内核为主，因此只考虑webkit的兼容性即可
        
      • 我们可以放心使用H5C3
        
    • 2、移动端的公共样式
      
      • 推荐使用normalize.css
        
      • 优点：
        
        • 保护了有价值的默认值
          
        • 修复了一部分浏览器的bug
          
        • 模块化的
          
        • 拥有详细的文档
          
    • 3、可以大量使用C3的盒子模型
      
      • 如果PC端需要更多浏览器完全兼容，就用传统模式，如果不考虑兼容，或者在移动端使用，就可以直接使用C3盒子模型，也就是box-sizing：border-box；
        
  • 移动端常见的布局
    
    • 1、移动端单独制作（主流）
      
      • 流式布局
        
      • flex弹性布局
        
      • less+rem+媒体查询
        
      • 混合布局
        
    • 2、响应式布局（次要）
      
      • 媒体查询
        
      • bootstrap
        
• 流式布局
  
  • 概念
    
    • 流式布局就是百分比布局，也叫做非固定像素
      
    • 通过对盒子的宽度进行百分比设置来达到根据屏幕的宽度进行响应伸缩的目的，不受规定像素限制
      
• flex布局
  
  • 传统布局和flex布局的对比
    
    • 传统布局：
      
      • 兼容性好、布局繁琐、局限性（不能再移动端进行很好的布局）
        
    • flex布局
      
      • 操作方便、布局简单、移动端应用广泛
        
      • PC端有一定的兼容问题，但是大部分PC端浏览器也是支持flex布局
        
      • IE11以下不支持flex
        
  • 建议
    
    • 如果是PC端页面布局，最好采用传统方式
      
    • 如果是移动端或者不考虑PC端兼容性的，都可以采用flex进行布局
      
  • flex的布局原理
    
    • flex-->弹性布局，任何一个盒子都可以指定为flex
      
    • 当我们给父级盒子指定了flex布局后，子元素里面的float、clear和vertical-align属性都将失效
      
    • 采用flex布局的元素，成为flex容器（flex container），简称“容器”，它的所有子元素自动成为容器成员，叫做flex项目（flex item），简称“项目”
      
  • flex布局里面的父项常见属性
    
    • flex-direction：设置主轴的方向
      
      • 在flex布局中分为x轴和y轴，默认的主轴是x轴，也就是水平向右，也可以将主轴设置为y轴，也就是垂直向下
        
      • 注意
        
        • 主轴和侧轴是会变化的，x主轴y侧轴；y主轴x侧轴
          
      • 属性值
        
        • row：沿x轴从左到右进行排列（默认值）
          
        • row--reverse：沿x轴从右到左
          
        • column：沿y轴从上到下
          
        • column--reverse：沿y轴从下到上
          
    • justify-content：设置主轴上子元素的排列方式
      
      • 属性
        
        • flex-start
          
          • 默认值，从头部开始，如果主轴是x就是从左到右
            
        • flex-end
          
          • 沿主轴尾部开始进行排列
            
        • center
          
          • 在主轴上进行居中对齐（X轴水平居中）
            
        • space-around
          
          • 所有子项平分剩余空间
            
        • space-between
          
          • 先让两侧盒子贴边，然后在平分剩余空间
            
    • flex-wrap：设置子元素是否换行
      
      • 默认情况下，项目都在一条线上，不进行换行操作
        
      • 属性值
        
        • nowrap：不换行，默认值
          
        • wrap：换行
          
    • align-items：设置侧轴上的子元素的排列方式（单行）
      
      • 注意：要在侧轴上子项是单行的时候使用
        
      • 属性值
        
        • flex-start：从头开始
          
        • flex-end：从后面开始
          
        • center：居中对齐
          
        • stretch：拉伸
          
    • align-content：设置侧轴上的子元素的排列方式（多行）
      
      • 设置子项在侧轴上的排列方式，只能用于多行子项的情况（子项换行时），单行没有效果
        
      • 属性
        
        • flex-start：从头开始
          
        • flex-end：从后面开始
          
        • center：居中显示
          
        • space-around：子项在侧轴平分剩余空间
          
        • space-between：子项在侧轴先两侧贴边，然后再平分剩余空间
          
        • stretch：拉伸
          
    • align-items和align-content区别
      
      • align-items适用于单行情况下，只有上对齐、下对齐、居中和拉伸
        
      • align-content适用于多行情况下（单行无效），上对齐、下对齐、居中和拉伸以及平分剩余等属性
        
      • 单行align-items
        
      • 多行align-content
        
    • flex-flow复合属性
      
      • 是flex-direction和flex-wrap的复合属性
        
      • 例：可以同时设置主轴方向和是否换行
        
  • flex布局子项常见属性
    
    • align-self 控制子项自己在侧轴上的排列方式
      
      • 默认值auto，表示继承父元素的align-items属性，如果自己有align-self，就用自己的属性
        
      • 属性值
        
        • flex-start：从头开始
          
        • flex-end：从后面开始
          
        • center：居中对齐
          
        • stretch：拉伸
          
    • order（排列前后顺序）属性定义项目的排列顺序
      
      • 数值越小排位越靠前，默认为0
        
      • 注意：不要和z-index（排列盒子上下顺序）混淆
        
    • flex来控制子项占的份数
      
      • 注意：
        
        • 一个盒子可以同时是容器和项目（套娃）
          
        • 如果一个子项有自己的宽度高度，那么其他子项有flex:1; 就代表将剩余的部分进行平分。