菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 陈紫怡-20221027-响应式布局 [打印本页]

---

作者: Dasmondlicht    时间: 2022-10-27 23:54
标题: 陈紫怡-20221027-响应式布局
一、今日学习内容：

• 响应式开发原理
  
  • 就是使用媒体查询针对不同的宽度的设备进行布局和样式的设置，从而适配不同设备
    
  • 设备的划分情况：
    
    • 小于768px的为超小设备（手机）
      
    • 768px-992px之间为小屏幕设备（平板）
      
    • 992px-1200px之间为中等屏幕（桌面显示器）
      
    • 大于1200px以上就是超大屏幕（大桌面显示器）
      
  • 版心尺寸划分
    
    • 小于768px的为超小设备（手机）   版心100%
      
    • 768px-992px之间为小屏幕设备（平板）   版心750px
      
    • 992px-1200px之间为中等屏幕（桌面显示器）   版心970px
      
    • 大于1200px以上就是超大屏幕（大桌面显示器）  版心1170px
      
  • 响应式版心案例
    
• BootStrap前端框架
  
  • bootstrap简介
    
    • 标注化的html+css编码规范
      
    • 提供了一套简洁、直观、强大的组件
      
    • 有自己生态圈，会不断更新迭代
      
    • 让开发会更简单，提升我们的开发效率
      
  • 版本简介
    
    • 2.x.x：停止维护，兼容性好，但是代码不够简洁、功能不完善
      
    • 3.x.x：目前使用最多，稳定，放弃IE6/7，IE8支持但界面效果不太好，偏向开发响应式布局，移动设备优先的web项目
      
    • 4.x.x：最新版，目前使用的用户较少。
      
  • BootStrap的基本使用
    
    • 在现在阶段我们还没接触JS的相关内容，所以只考虑使用它的样式库。
      
    • 引入BootStrap的步骤
      
      • 1、创建文件结构，将bootstrap的代码放到相应的文件夹中
        
      • 2、创建html的骨架结构
        
      • 3、引入相关文件
        
      • 4、书写内容
        
  • BootStrap栅格系统
    
    • bootstrap布局容器
      
      • 它为页面内容和栅格系统包裹了一个.container容器或者.container-fluid 容器
        
      • .container
        
        • 响应式布局的容器，固定宽度
          
          • 大屏（屏幕宽度>=1200px)宽度设定为1170px
            
          • 中屏（屏幕宽度>=992px)宽度设定为970px
            
          • 小屏（屏幕宽度>=768px)宽度设定为750px
            
          • 超小屏 100%                                                                             
            
      • .container-fluid
        
        • 流式布局容器，百分百宽度
          
        • 占据全部视口的容器
          
      • 注意点：
        
        • bootstrap给两个容器，都增加了15px的左右内边距（padding值)
          
    • bootstrap的栅格系统使用
      
      • 随着屏幕或者视口尺寸的增加，系统会自动分配最多12列栅格
        
      • 栅格系统通过一系列行（row）和列（column）的组合来创建页面布局，我们内容就可以写在这些创建好的布局中
        
      • 按照不同的屏幕划分为1-12等份，如果想去掉padding，可以给父容器加row即可
        
      • xs-extra-small超小；sm-small小；md-medio中等；lg-large 大；
        
      • BootStrap的栅格系统参数
        
      • 根据栅格份数的不同会有不同的显示方式
        
        • 1、份数为12份会占满盒子
          
        • 2、如果份数不平均，会按照每个盒子的份数进行分配
          
        • 3、份数不够12份会在最后一个盒子之后留空白
          
        • 4、总份数超过12份，超过12份的盒子会换行显示
          
        • 5、通过多类名的方式来控制盒子在不同屏幕下的占比
          
      • 栅格系统的列嵌套 每一个盒子都可以作为一个新的行进行处理，进行列嵌套操作（套娃）
        
      • 栅格系统的列偏移 col-lg-offset-n  代表在大屏幕下将盒子向右移动n列 ，在其他的盒子下进行偏移 值需要更改 col-lg-offset-n  中的 lg 即可（xs、sm、md、lg）
        
      • 栅格系统的列排序：通过使用.col-lg-push-n(将盒子向右推n列)和 .col-lg-pull-n(将盒子向左拉n列)
        
    • bootstrap在不同屏幕下的显示与隐藏
      
      • 在不同屏幕宽度下对元素进行隐藏
        
      • 在不同的屏幕宽度下对元素进行显示
        

---

欢迎光临 菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)

Powered by Discuz! X3.4