响应式开发 day11 2021-4-19

响应式开发 day11 2021-4-19

1.1 响应式开发原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的

1.2 响应式布局容器

响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化

平时我们的响应式尺寸划分

• 超小屏幕（手机，小于768px）：设置宽度为100%
• 小屏幕（平板，大于等于768px）：设置宽度为750px
• 中等屏幕（桌面显示器，大于等于992px）：宽度设置为970px
• 大屏幕（大桌面显示器，大于等于1200px）：宽度设置为1170px

2.1 Bootstrap前端开发框架

框架：顾名思义就是一套架构，它有一套比较完整的网业功能解决方案，而且控制权在框架本身，有预设样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。

优点

• 标准化的html+CSS编码规范
• 提供了一套简介、直观、强悍的组件
• 有自己的生态圈，不断的更新迭代
• 让开发更简单，提高了开发的效率

3.3 列嵌套

我们列嵌套最好加1个行row这样可以取消父元素的padding值而且高度自动和父级一样高

3.4 列偏移