响应式

简单来说，就是同一个页面，适应不同类型的视口(PC端、手机端…)

使用媒体查询**@media**可以自动识别屏幕大小，对应不同的css样式，进而实现不同尺寸的页面都能适应正常想要的页面布局

断点（屏幕大小）

Bootstrap是怎么进行断点的呢？

上面的分割方案不一定满足项目中的实际需求，我们可以先用跨度大的分割点进行分割，如果出现不适配的情况可以再根据实际情况增加新的分割点。

响应式与移动pc分开开发的区别于优缺点：

媒体查询@media

**特征：**利用css的后面的会覆盖前面的样式

书写：

像min-width和max-width这种，为了防止覆盖影响效果，那么

min-width:由小到大写

max-width:由大到小写

css语法

/* 媒体查询@media 媒体类型 和and 媒体功能 都满足才生效*/
	@media 媒体类型 and|not|only (媒体功能:属性值) {
  		CSS-Code;
	}
/* 
	和and
	取反not
	唯一only
*/

/* min-width:由小到大写 */ 
body {
        background-color: #880a0a;
      }
      /* 手机 */
      @media screen and (min-width: 768px) {
        body {
          background-color: blue;
        }
        /* 平板 */
        @media screen and (min-width: 993px) {
          body {
            background-color: green;
          }
        }
        /* 电脑 */
        @media screen and (min-width: 1200px) {
          body {
            background-color: pink;
          }
        }
      }

/* max-width:由大到小写 */
body {
        background-color: #880a0a;
      } 
	  /* 电脑 */
      @media screen and (max-width: 1200px) {
        body {
          background-color: pink;
        }
      }
      /* 平板 */
      @media screen and (max-width: 993px) {
        body {
          background-color: green;
        }
      }
      /* 手机 */
      @media screen and (max-width: 768px) {
        body {
          background-color: blue;
        }
      }

max-width 和 min-width
ps:针对的是页面宽度，根据不同页面宽度，对应当前页面宽度的样式，会根据页面的大小改变而变化
max-device-width 和 min-device-width
ps:针对的是设备宽度，设备宽度是一个定值,根据不同设备，对应当前设备的样式，不会根据页面的大小改变而变化

媒体类型mediatype

媒体功能media feature

引入

为了书写直观和资源节省加载，不同的类型的媒体查询分开写在独立的css文件里面，通过引入的方式进行使用

/* style@sd.css 小屏768px的样式 */
body {
  background-color: blue;
}

/* style@ld.css pc端1200px的样式 */
body {
  background-color: pink;
}

栅格化布局grid

与flex布局相似，指定内部容器多个item的位置 ，Excel表格效果

flex与grid的区别：

flex 布局是根据 轴线 (主轴 辅轴) 只能规划item针对轴线的位置进行布局

Grid 可以直接划分"行" “列” 产生单元格 指定item所在的 单元格

grid四部分

1、容器(wrap)与项目(item)

2、行(row)与列(column)

3、单元格(cell)

4、网格线(grid line)

1.容器(wrap)与项目(item)

容器(wrap)

属性

display: grid| inline-grid;		/*使用grid布局*/

template模板

/*
参数：
	1、数字(100px)或者百分比
	2、repeat(num/auto-fill,长度) 重复几次 (次数,...参数)  
		ps:	repeat的参数auto-fill ，列(行)数自动 根据设置长度 自动填满列(行)
	3、fr (fraction 片段)根据容器，进行等比划分，类似于一个单位
	4、minmax(min,max)返回一个长度范围，在范围内自动划分长度
	5、auto 由浏览器自动决定长度
	6、[c1]
*/
template模板
grid-template-columns: 参数;	/*指定容器每一列的宽度，参数数量决定列数量*/
grid-template-rows: 参数;		/*指定容器每一行的高度，参数数量决定行数量*/
grid-template-areas: 矩阵形式的参数	/*通过矩阵形式快速得到item位置布局，结合上面两个属性设置长度*/

gap间距

/*参数决定间距大小*/
grid-row-gap: 参数;	/*行间距*/
grid-column-gap: 参数;/*列间距*/
/*复合属性*/
grid-gap:  ;		/*行和列间距*/

grid-auto-flow排列方向

/*设置item的排列方向*/                   
grid-auto-flow: row/column/row dense
row:行优先,横向排列，横向满了再考虑纵向，会有空格出现，不会补位
column:行优先,横向排列，横向满了再考虑纵向，会有空格出现，不会补位
row dense : 先行,后列,有空格的情况下，会进行空格补位

flex对齐方式

/*设置item的对齐方式*/
start  end  center space-around space-between space-evenly stretch
左对齐 右对齐 居中对齐 1:2:2:1对齐     两侧对齐     1:1:1:1对齐  (默认)填充
/*水平方向*/
justify-content:start end center space-around space-between space-evenly stretch
/*垂直方向*/
align-content:start end center space-around space-between space-evenly stretch

案例

/*使用grid布局*/
display: grid;
/* 数字(100px)或者百分比 */
grid-template-columns: 200px 200px 200px;
grid-template-rows: 50% 50%;
/* repeat(num/auto-fill,长度) */
/*grid-template-columns: repeat(3, 200px);*/
grid-template-columns: repeat(auto-fill, 200px);
grid-template-rows: 50% 50%;
/* fr */
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 50% 50%;
/* minmax(min,max) */
grid-template-columns: 1fr minmax(100px, 2fr) 1fr;
grid-template-rows: 50% 50%;
/* auto */
grid-template-columns: 1fr auto 1fr;
grid-template-rows: 50% 50%;
/* grid-template-areas */
grid-template-areas:
          "a b"
          "e f"
          "c d";
/* grid-row-gap */
grid-row-gap: 10px;
/* grid-column-gap */
grid-column-gap: 10px;
/* grid-gap */
grid-gap: 10px;

项目(item)

容器(wrap)设置了栅格化布局，

项目(item)的float ，display:inline-block， vertical-align， cloumn-* 样式失效

item相对容器的位置属性

/*指定item四个边框 分别定为在哪根网格线上 > 决定item的位置*/
 grid-cloumn-start	项目(item)垂直网格线开始的位置
 grid-cloumn-end 	项目(item)垂直网格线结束的位置
 grid-row-start		项目(item)水平网格线开始的位置
 grid-row-end		项目(item)水平网格线结束的位置
/*复合属性*/
grid-column:  / 
grid-row:  / 
grid-area: ///

ps:可以画图或者使用Excel表格进行预设，查看item的具体位置，所占的网格线的起始位置进行item的定位

案例

main {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 10px;
  width: 768px;
  margin: 10px auto;
}
main .item {
  box-sizing: border-box;
}
main .item:nth-of-type(1) {
  /* grid-column-start: 3;
  grid-column-end: 4; */
    
  grid-column: 3/4;
}
main .item:nth-of-type(2) {
  /* grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1; */
    
  grid-column: 1/3;
  grid-row: 1/2;
}
main .item:nth-of-type(3) {
  /* grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 3; */
  grid-area: 2/3/3/4;
}
main .item:nth-of-type(4) {
  /* grid-column-start: 1;
  grid-row-start: 2;
  grid-row-end: 4; */
    
  grid-column: 1/2;
  grid-row: 2/4;
}
main .item:nth-of-type(5) {
  /* grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4; */
    
  grid-area: 3/2/4/4;
}

item相对单元格的位置属性

调整对齐方式 :
/*设置单元格内容的 水平位置*/
justify-self
参数：
	默认：stretch(拉伸 宽度铺满单元格)
	start end center  (宽高度 内容本身宽高度)
/*设置单元格内容的 竖直位置*/
align-self 
参数：
	默认：stretch(拉伸 宽度铺满单元格)
    start end center  (宽高度 内容本身宽高度)
/*复合属性*/
place-self: 

案例

item:nth-of-type(1) {
        width: 100px;
        height: 100px;
        /* justify-self: end;
        align-self: start; */
        place-self: start end;
        grid-column: 3/4;
      }

Bootstrap库

Bootstrap中文网 (bootcss.com)

下载

npm i bootstrap@5.3.0-alpha1

模板

  
    
    
    Bootstrap demo
    
  
  
	
hello world
    
  

容器类

版心容器

通栏容器

grid栅格化断点

• 超小号 （xs：extra-small）
• 小 （sm：small）手机
• 中 （md：middle）手机
• 大 （lg：large）平板
• 超大号 （xl：extra-large）pc端
• 超大号 （xxl：extra-extra-large）大屏

  

  行与列类

  类

  row代表行

  col代表行列

  ​ 每一列都是一整行分成了12份，列里面还可以嵌套行与列

  ​ col-断点型号-num：代表当前行在当前断点型号占了num份

  ​ col-md-6：屏幕大小在md范围内，当前行的长度为整行的6/12

  
        
  
          
  1
          
  2
          
  3
          
  4
          
  5
          
  6
          
  7
          
  8
          
  9
          
  10
          
  11
          
  
           	 
  
                   
  12列里面的第1行第1列
              
           
        
      
  

  列偏移类

  offset-断点型号-num:当前列 在断点型号尺寸下 向右偏移 num列 后续元素受影响

  offset-lg-3：当前列 在lg尺寸下 向右偏移 3份 后续元素同时向后偏移

     
  
        
  
          
  1
          
  2
          
  3
          
  4
        
      
  

  display隐藏类

  /* 完全从文档流中移除元素，既不显示也不占用空间 */
  display: none
  /* 元素不可见，但依然占据原来的空间（布局保留，只是视觉上透明）*/
  visibility: hidden
  

  /*  
  	媒体查询所覆盖的屏幕宽度包括从给定的断点开始并延伸到 更大 的屏幕尺寸 
  		例如：d-lg-none 将在 lg、xl 和 xxl 屏幕尺寸下设置 display: none;
  */
  d-断点型号-display属性
  display属性:
  none
  inline
  inline-block
  block
  grid
  table
  table-cell
  table-row
  flex
  inline-flex
  

  如需在给定的屏幕尺寸范围内显示某个页面元素的话，可以将一个 .d-*-none 类和一个 .d-*-* 类联合使用

  Screen size	Class
  Hidden on all	d-none
  Hidden only on xs	d-none d-sm-block
  Hidden only on sm	d-sm-none d-md-block
  Hidden only on md	d-md-none d-lg-block
  Hidden only on lg	d-lg-none d-xl-block
  Hidden only on xl	d-xl-none d-xxl-block
  Hidden only on xxl	d-xxl-none
  Visible on all	d-block
  Visible only on xs	d-block d-sm-none
  Visible only on sm	d-none d-sm-block d-md-none
  Visible only on md	d-none d-md-block d-lg-none
  Visible only on lg	d-none d-lg-block d-xl-none
  Visible only on xl	d-none d-xl-block d-xxl-none
  Visible only on xxl	d-none d-xxl-block

  颜色库colors

  下载

  npm install colors.css
  

  打印js接口

  window.print()
  

  仅在屏幕上显示（仅在打印时隐藏）
  仅在打印时显示（仅在屏幕上隐藏）
  在屏幕尺寸小于或等于 lg 时隐藏，但打印时永远都会显示
  

  normalize.css

  下载

  npm install normalize.css