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

标题: 梁洁-20221027-移动端第三天 [打印本页]

作者: 梁杰，你好 时间: 2022-10-30 23:45
标题: 梁洁-20221027-移动端第三天
缩放精灵图
屏幕缩小话  背景突变也要通过background
视口的高度和宽度
单位是vw  视口宽度  vh  视口高度
响应式开发原理：
使用媒体查询针对不同宽度的设备进行布局和样式进行设置，从而适配不同的设备。
设备的划分情况：
小于768px    为超小屏幕  就是手机
768px到992px 小屏幕设备
992到1200px 的时候中等屏幕设备  桌面显示器
大于1200px 超大屏幕大桌面显示器
版心尺寸划分
小于758  版心为100%
小屏幕版心为750px
中等屏幕 970px
超大屏幕用1170px

bootstrap
标准话的html和css文件
提供一套简介、直观、强大的组件
有自己的生态圈
让开发会更简单，提高我们的效率

版本简介：
2.x.x  停止维护，兼容性不好，但是代码不够简洁，功能不完善
3.x.x  目前使用的最多，稳定，但是放弃了ie6和ie7，ie8支持，但是洁面效果不好，偏向开发响应式布局、移动设备优先的web项目。
bootstrap
现阶段我们还没有接触js相关内容，所以只考虑使用它的样式库

创建文件将bootstrap的代码，将bootstrap的代码放到相应的文件夹中
引入bootstrap 。min。css

bootstrap的栅格系统
bootstrap的布局容器：
他为页面内容和栅格系统报过了一个。continer 和container-fluid
container 响应式布局的容器，固定宽度
大屏  屏幕宽度》1200px 宽度为1170px
中屏  屏幕宽度 >992px  宽度是970px
小屏  屏幕宽度>768px 宽度为750px
超小屏幕宽度设定为100%
container 流式布局的容易，百分百宽度
占据全部视口

注意：container和container-fluid都增加了15px 的内边距
bootstrap的栅格系统的使用
屏幕或者视口的尺寸增加屏幕会最多分配12列的栅格。
栅格系统通过一系列的行与列  的组合来创建页面布局，我们的内容就可以写在这些创建好的布局中
1、按照不同的屏幕划分1-12等分，如果想去掉padding，给父容器加row即可
2、xs-etra-small  超小屏幕 sm-small  小屏幕 md-media  中等屏幕  lg-lage 大屏
分数不够最后面留白
份数超过的盒子换行显示
栅格的列嵌套
是容器也是项目
列偏移：
offset
列排序

.contaimer最大宽度
bootstrap在不同请下控制元素的显示和隐藏
.hidden-xs最小屏幕下隐藏
.hidden -sm  小屏幕下隐藏
.hidden-md 中屏幕下隐藏
.hidden-lg 大屏幕下隐藏

.visible-xs  只在最小屏幕下显示
.visible -sm  只在小屏幕下显示
.visible-md 只在中屏幕下显示
.visible-lg 只在大屏幕下显示

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