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

标题: 赵强-20221027-响应式布局 [打印本页]

作者: BlueFlame 时间: 2022-10-28 00:20
标题: 赵强-20221027-响应式布局
今日所学内容：
Web移动端响应式开发
   响应式开发原理
就是使用媒体查询针对不同的宽度的设备进行布局和样式的设置，从而适配不同设备
设备的划分情况：
   小于768px的为超小屏幕（手机）
   768px~992px之间为小屏幕设备（平板）
   992px~1200px之间为中等屏幕（桌面显示器）
   大于1200px以上就是超大屏幕（大桌面显示器）
   版心尺寸划分
   小于768px的为超小屏幕（手机）
   768px~992px之间为小屏幕设备（平板）
   992px~1200px之间为中等屏幕（桌面显示器）
   大于1200px以上就是超大屏幕（大桌面显示器）
      BootStrap前端框架
BootStrap简介
      标准化的html+css编译规范
      提供了一套简洁、直观、强大的组件
      有自己生态圈，会不断的更新迭代
      让开发会更简单，提供我们的开发效率
      版本介绍
2.x.x:停止维护，兼容性好，但是代码不够简洁，欧纳古能不完善
3.x.x:目前使用的最多，稳定，但是它放弃了IE6,IE7.对IE8支持,但是界面效果不好,偏向于响应式开发布局,移动设备有限的Web项目
4.x.x:最新版,目前使用的用户较少
      BootStrap的基本使用
      BootStrap的栅格系统
bootstrap的布局容器
BootStrap的栅格系统使用
      随着屏幕或者视口尺寸的增加,系统会自动分配最多12列的栅格
      栅格系统通过一系列的行和列的组合开创建页面布局,我们内容就可以写在这写创建好的布局中
      1.按照不用的屏幕划分为1~12等份,如果想要去掉padding,可以给父容器加row即可
      2.xs-extra-small超小;sm-samall小屏幕;md-dedia中等;
      它为页面内用和栅格系统包裹了一个.container容器,或者.container-fluid

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