20200820戚权

知识点:

手写响应式网页:

  • @media screen and (min-width:1200px) { 选择器{ 样式代码 } }
  • @media screen and (min-width:992px) and (max-width:1199px){ 选择器{ 样式代码 } }
  • @media screen and (min-width:768px) and (max-width:991px){ 选择器{ 样式代码 } }
  • @media screen and (min-width:576px) and (max-width:767px) { 选择器{ 样式代码 } }
  • @media screen and (max-width:575px) { 选择器{ 样式代码 } }

屏幕划分:

  • 超大屏 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

容器:

  • .container定宽容器,左右内边距15px,水平居中,每种不同的分辨率下,有不同的最大宽度(max-width)
  • .container-fluid变宽容器,宽度永远是父级的100%

栅格布局:

  • 栅格布局:是随屏幕或者视口(viewport)尺寸的增加,系统会自动分为最多12列,通过一系列的行(row)与列(column)的组合来创建页面布局
  • 父级要写.row:注意:.row必须写在.container或者.container-fluid中。当前元素使用栅格布局,当前行被分为相等的12份,主轴为x轴的弹性布局,起点在左侧,可换行,左右为15px外边距
  • 子元素要写:.col-n设置了子元素的最大宽度,一个col在row中占几份col-n,左右15内边距,n为1~12

标签

评论

this is is footer