20200820_陈宇_

日志

学习总结:

响应式布局:

​ 一定要会手写响应式布局

​ 移动端响应式,需要设置视口

​ 屏幕划分:超大屏(xl):min-width:1200px

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

​ 中屏(md):min-width:768px and max-width:991px

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

​ 超小屏(xs):max-width:575px

媒体查询:响应式都是css3的,不是boot的

​ @media screen and (max-width:575px) {

​ 选择器{ 样式代码 }

​ }

向上兼容:

​ 如果设置了最小宽度,实际宽度>min-w,所使用的都是min-w中的样式

栅格布局:

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

​ 非常复杂的页面不建议使用栅格

​ 父级要写:.row 且必须写在.container或者.container-fluid中

​ 子元素要写:.col-n 如果只使用col而不加数字,系统会自动处理布局,甚至一行可以会超过12个col

弹性布局:

​ 内容垂直对齐要设置在父元素身上

​ 设置子元素等宽要设置在子元素身上

​ fetch:新的ajax请求

文本不换行,超出部分是省略号表示:

​ overflow:hidden;

​ text-overflow:elipsis;

​ white-space:nowrap;

学习心得:

​ 今天学习的还是boot,渐渐明白了什么是框架,样式都是别人写好了的,直接拿来用,确实比自己手写更方便更快捷,但是才开始接触boot,里面很多东西都还记不住,还需要多多练习才能熟能生巧。

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1