20200820赵鑫

学习总结

响应式布局

什么是响应式布局:

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封装而成的,需要多加练习才能够达到熟能生巧的程度。媒体查询主要用于移动端的页面,之前做过,这一块较为熟悉,但是用的不多需要多加练习。栅格布局第一次接触,还需要多加练习才能掌握。

标签

评论

this is is footer