移动web开发———第三天

Posted 2020-10-23

一、响应式开发
1、响应式布局， 就是一个网站能够兼容多个终端。
2、响应式开发的原理
CSS3中的Media Query（媒介查询，and之后一定要加空格@media screen and (min-width: 768px) and (max-width: 992px) {}; 通过查询screen的宽度来指定某个宽度区间的网页布局。
超小屏幕（移动设备）768px以下
小屏设备 768px-992px
中等屏幕 992px-1200px
大屏设备 1200px以上
3、响应式开发和移动web开发的区别
开发方式 移动web开发+PC开发 响应式开发
应用场景 一般在已经有PC段的网站，开发移动站的时候，只需单独开发移动端 针对新建站的一些网站，现在要求适配移动端，所以就一套页面兼容各种终端，灵活
开发 针对性强，开发效率高 兼容各种终端，效率低
适配 只是陪移动设备，pad上体验相对较差 可以适配各种终端
效率 代码简洁，加载快 代码相对复杂，加载慢

bootStrap
bootStrap框架----当前最流行的前端UI框架（有预制界面组件）
特点：组件简洁大方，代码规范精简，界面自定义性强
优点：
有自己的生态圈，不断的更新迭代
提供了一套简洁、直观、强悍的组件
标配准化的html+css编码规范
让开发更简单，提高了开发的效率。
3、布局容器
.container固定宽度并且支持响应式布局的容器
默认margin:55px; padding:15px;
.container-fluid类用于 100% 宽度，占据全部视口（viewport）的容器。
4、删格系统
行：row 通过自身的拉伸来填充父容器的内边距
删格参数：
超小屏幕 手机(<768px) 小屏幕 平板(≥768px) 中等屏幕(≥992px) 大屏幕 (≥1200px)
栅格系统行为 总是水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container最大宽度 None（自动） 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列数(column) 12
可嵌套 是
偏移（Offsets） .col-xs-offset-
可见、隐藏 .visible-xs- .hidden-xs