前端-王卓凡-20230428

今天所学内容：WEB移动端之响应式开发响应式开发的原理

• 使用媒体查询针对不同的宽度的设备进行布局和样式的设置，从而适配不同的设备，
• 通常设备的划分情况如下：
  • 小于768px的宽度为超小屏幕
  • 768~992之间的为小屏设备
  • 992~1200px之间的是中等屏幕
  • 1200px以上的是大屏幕
    
    
• 响应式布局的容器
  • 响应式需要一个父级作为布局容器，来配合子元素实现变化效果
  • 父级容器版心的尺寸
    • 小于768px的宽度为超小屏幕 版心宽度设置为100%
    • 768~992之间的为小屏设备  版心宽度设置为750px
    • 992~1200px之间的是中等屏幕 版心宽度设置为970px
    • 1200px以上的是大屏幕 版心宽度设置为1170px
      
      
  • 例
    
    
  
  

BootStrap前端框架

• 简介
  • 它是一个标准化的HTML+CSS的代码库
  • 提供了简洁、方便使用的组件
  • 有自己的生态圈，更新迭代比较好
  • 能提升开发效率
    
    
• 版本简介
  • 2.x.x ：停止维护，代码不够简洁
  • 3.x.x，4.x.x： 是目前使用比较多的版本，对IE6 7不支持，IE8只是部分支持，适用于开发响应式布局、移动设备优先的项目
  • 5.x.x：最新版，目前不是很流行。
    
    
• BootStrap的基本使用
  • 目前只考虑BootStrap框架中的css样式库的使用。
  • 引入方式
  • 组件使用
    
    
  
  

BootStrap的栅格系统

• Bootstrap需要为页面分配栅格系统，有两个类可以进行使用 .container和.container-fluid 作用如下
  • .container
    • 响应式布局容器
    • 768px以下 宽度设置为100%
    • 768px~992px之间 宽度设置为750px
    • 992px~1200px之间 宽度设置为970px
    • 1200px以上 宽度设置为1170px
      
      
  • .container-fluid
    • 流式布局的容器，百分百宽度
    • 会占据全部的视口
      
      
    
    
• 栅格系统
  • 系统会将页面最多分为12列。
  • 栅格系统通过行（row）和列（column）的组合来控制页面布局，我们的页面内容就可以放到这些创建好的布局中
  • 注意点：
    • 按照不同的屏幕可以划分1~12等份，使row可以去除父元素的左右15px的内边距值
    • xs：extra small，sm：small，md：medium， lg:large
    • 每一个rwo都是新的一行
    • 每一列默认左右会有15px的内边距值
    • 可以在不同的屏幕宽度下设置不同的列数分配，使用多类名实现即可。
      
      
  • 不同屏幕下划分份数的类前缀
    • 超小屏幕（<768px） .col-xs-
    • 小屏幕下（768px<= 屏幕宽度 <=970px） .col-sm-
    • 中等屏幕下（970px<= 屏幕宽度 <=1200px） .col-md-
    • 大屏幕下（屏幕宽度 >= 1200px） .col-lg-
      
      
  • 例
    
    
• 栅格列嵌套
  • 栅格系统内置的列可以再次进行嵌套，简单理解就是一个列内部再分成若干个小列，我们可以通过添加一个新的.row元素和一系列的col-lg-元素 来实现
  • 每一个新的.row都代表有一个新的行，行中可以分配的列数是1~12列，多余的列会自动换到下一行进行展示。
  • 例
    
    
• 栅格列偏移
  • 使用.col-lg-offset-类 可以实现将列向右进行偏移，原理实际是用margin-left来实现的。
  • 例
    
    
• 栅格的列排序
  • 使用.col-lg-push和.col-lg-pull两个类可以实现列排序
  • 例
    
    
• 栅格的响应式工具
  • 为了加快页面的开发，利用媒体查询，可以针对不同的设备来控制页面元素的显示和隐藏
  • 隐藏内容
    • 例
      
      
  • 显示内容
    • 例
      
      
  • 例
    
    
  
  

前端页面的总结

• PC端：
  • 先写结构，在去整理样式
  • 结构永远比样式更重要
  • H5C3在部分浏览器中可能会出现兼容性的问题
    
    
• 移动端
  • 移动端的主流方案：单独制作移动端页面
  • 移动端的备选方案：响应式页面兼容移动端
  • 移动端的技术选型：流式布局、flex布局（推荐）、rem布局（推荐）、响应式布局
  • 遇到的问题：无