学习总结

响应式布局

什么是响应式布局：

1.所有的内容/文字/图片尽量使用相对尺寸

2.复杂页面，不推荐使用响应式布局

3.流式布局+弹性容器+媒体查询=响应式网页布局

设置视口：

常用设备关键字：screen 屏幕 print打印机 speech 屏幕阅读器等发声设备

all所有

超大屏：xl max-width:1200px

大屏 lg min-width:992px and max-width:1199px

中屏 md min-width:768px max-width:991px

小屏sm min-width:576px and max-width:767px

超小屏 xs max-width:575px

栅格布局

随屏幕或者视口(viewport)尺寸的增加，系统会自动分为最多12列，通过一系列的行(row)与列(column)的组合来创建页面布局

弹性布局

和flex类似

学习心得

今天主要学习了Boot中的栅格布局和弹性布局，以及媒体查询。

总的来说，boot中的弹性布局和flex布局类似，是将C3中的flex封装而成的，需要多加练习才能够达到熟能生巧的程度。媒体查询主要用于移动端的页面，之前做过，这一块较为熟悉，但是用的不多需要多加练习。栅格布局第一次接触，还需要多加练习才能掌握。