自适应粗小结

杂知识--预先看

• 图片和文字垂直居中:vertical-align: middle
• DPR:设备像素比,设备像素比（dpr） = 设备像素（分辨率）/设备独立像素（屏幕尺寸）
  设备像素(物理像素): 显示器（手机屏幕）上最小的物理显示物理单元，在操作系统的调度下，每一个设备都有自己的颜色值和亮度值。
  设备独立像素(密度无关像素): 可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，有时我们也说成是逻辑像素。
  元素设置的CSS像素是始终不变的，而一个CSS像素对应多少个设备像素是根据当前的缩放比例来决定的
• px | em | rem | fr:
  1. px:在移动端自适应的要求下，使用的频率不是很高
  2. rem:（root em）相对 HTML 根元素的字体大小的值:字体大小（基本都是用 rem 作为单位）
     但是如果是移动设备，屏幕会有一个上下限制，可以控制分辨率在某个范围内，超过了该范围，就不再增加根元素的字体大小了(css的媒体查询或者js实现)
  3. em:也是一个相对单位，却是相对于当前对象内文本的字体大小(继承时,相当于相对于父元素的字体):
     1. line-height。在 line-height 使用 em,在需要调整字体大小的时候，只需修改 font-size 的值，而 line-height 已经设置成了相对行高了。
     2. 首行缩进两个字符
     3. 导航菜单项
  4. fr: 自适应单位，被用于在一系列长度值中分配剩余空间，如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配(可以和其他单位混合使用)。
• css的媒体查询:一般用在兼容PC和手机设备，由于屏幕跨度很大时,需要重新设计整界面的布局和排版
  • 缺点:灵活性不高，取每个设备的精确值需要自己去计算，所以只能取范围值。设备屏幕众多，分辨率也参差不齐，把每一种机型的css代码写出来是不太可能的。
  • 优点:无需监听浏览器的窗口变化，会跟随屏幕动态变化。媒体查询的用法当然不仅仅像在此处这么简单，相对于第二种自适应来说有很多地方是前者所远远不及的。
• viewport元标签:可以控制页面视口(viewport)的宽度、页面的缩放比例(原因:CSS中的1px并不一定不等于屏幕的物理分辨率1px),在桌面端指可视区域,在手机端指为Layout Viewport（布局视口）但是还另外涉及到Visual Viewport（视觉视口）和 Ideal Viewport。
  1. layout viewport——布局视窗: 网站的宽度，可以通document.documentElement.clientWidth获取
  2. visual viewport——视觉视窗: 代表浏览器可视区域的大小，可以通过 document.documentElement.innerWidth来获取
  3. ideal viewport——理想视窗: 跟移动设备相关的viewport，移动设备的宽度。iPhone的值是320
• 基本参数:

  属性	可取值	解释
  width	device-width或正整数	device-width为匹配视口的宽度，否则为自定义宽度（以像素为单位）
  height	device-height或正整数	device-height为匹配视口的高度，否则为自定义高度（以像素为单位）
  initial-scale	一个0.0 到 10.0之间的正数	定义页面与视口的比例，一般取1.0
  maximum-scale	一个0.0 到 10.0之间的正数	定义变焦的最大值，这里指可变最大值，即用户如果操作缩放的最大比例
  minimum-scale	一个0.0 到 10.0之间的正数	定义变焦的最小值，这里指可变最小值，即用户如果操作缩放的最小比例
  user-scalable	yes或者no	控制用户是否能放大页面，no为不可，默认值为yes

  • 视口单位:(手机竖屏情况和横屏情况,vw和vh对应不同)
  • vw : 1vw 等于视口宽度的1%
  • vh : 1vh 等于视口高度的1%
  • vmin(即vm) : 选取 vw 和 vh 中最小的那个
  • vmax : 选取 vw 和 vh 中最大的那个

宽度自适应

1. 利用流式布局:

两列布局:

• 左侧固定,右侧自适应:左侧div必须在右侧div前,左侧div用float:left,右侧margin-left为左侧的width

    *{
        margin:0;
        padding:0;
    }
  .left{
        background:red;
        float:left;
        width:200px;
    }
  .right{/*没有设置宽度,块级元素宽度在标准文档流中默认占满父级元素宽*/
        background:green;
        margin-left:200px;
    }

  
left
  
right

• 右侧固定,左侧自适应:同理
• 左右固定,中间自适应:中间的div必须排在最后,左右width固定,浮动到两边

2. 使用100%,负边距(负边距也会影响浮动了的元素的位置,并且会覆盖之前的浮动元素,但是自身不会被下一个浮动元素覆盖):

两列布局:

• 左侧固定,右侧自适应:左侧div必须在右侧div前,左右侧的div都使用float:left,右侧width为100%,margin-left为左侧的width;左侧的margin-right必须为负的,且大小必须至少大于本身的宽度

  *{
      margin:0;
      padding:0;
  }
  .left {
      background: red;
      height: 200px;
      width: 200px;
      float: left;
      margin-right: -100%; /* 一定要有,因为包含块所剩空间不足以容纳下一个浮动元素，这个浮动元素会自动另起一行,即右侧会另起一行*/
  }
  .right {
      background: green;
      display: inline;
      width: 100%;
      float: left;
      margin-left: 200px;
  }
  left
  right
  

• 右侧固定,左侧自适应:同理,但是此时是右侧的宽度固定,所以左侧的margin-right为右侧的宽度,且右侧右浮动便可,不用设置margin-left

• 左右固定,中间自适应:中间的div排在最前,宽度百分百,左浮动,内嵌一个放内容的div(inner),其margin-left和margin-right为左右侧的宽度,左右两侧固定宽度左右浮动或者都左浮动,左侧margin-left为-100%,右侧margin-left为自身宽度

    *{
        margin:0;
        padding:0;
    }
    .center {
        background: yellow;
        float: left;
        width: 100%;
    }
    .inner {
        margin: 0 200px;
    }
    .left {
        background: red;
        height: 200px;
        width: 200px;
        float: left;
        margin-left: -100%;/*因为左侧的div在右侧之前,所以左侧的位置会影响右侧哟*/
    }
    .right {
        background: green;
        width: 200px;
        float: left;
        margin-left: -200px;
    }
    

        
center
    
    
left
    
right

3. 利用绝对定位:

两列分布,左右固定,中间自适应:div顺序:左-中间-右
左右侧绝对定位,且left和right分别为0,中间margin-left和margin-right分别为左右侧宽度

凝胶布局

宽度固定,margin-left和margin-right为auto

完全自适应

1. 百分比或者rem和em

1. 百分比: 外部整体包装盒div固定宽高(定死),并设置居中,里面的内容采用百分比
2. rem: 在html(根)选择器里设置font-size,并且用媒体查询设置不同分辨率下html的font-size,接下来就是子元素全部运用rem来设置
3. em:

2. flex布局:

• 有两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

  
  
  flex示意图
• 父元素的属性:

  • flex-direction：主轴的方向（主轴的方向不一定是水平的，这个属性就是设置主轴的方向，主轴默认是水平方向，从左至右，如果主轴方向设置完毕，那么交叉轴就不需要设置，交叉轴永远是主轴顺时针旋转 90°）:

    1. row: 默认值，主轴为水平方向，起点在左端。
    2. row-reverse: 主轴为水平方向，起点在右端。
    3. column: 主轴为垂直方向，起点在上。
    4. column-reverse: 主轴为垂直方向，起点在下。

  • flex-wrap：超出父容器子容器的排列样式(换不换行,怎么换行)。

    1. nowrap: 默认，不换行
    2. wrap: 换行，第一行在上方。
    3. wrap-reverse: 换行，第一行在下方。

  • flex-flow：flex-direction 属性和 flex-wrap 属性的简写形式,默认值为 row nowrap:
    flex-flow: || ;

  • justify-content：子容器在主轴的排列方向。

    1. flex-start: 默认，左对齐
    2. flex-end: 右对齐
    3. center: 居中
    4. space-between: 两端对齐，项目之间的间隔都相等。
    5. space-around: 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

  • align-items：子容器在交叉轴的排列方向。

    1. flex-start: 交叉轴的起点对齐。
    2. flex-end: 交叉轴的终点对齐。
    3. center: 交叉轴的中点对齐。
    4. baseline: 项目的第一行文字的基线对齐。
    5. stretch: 默认，如果项目未设置高度或设为auto，将占满整个容器的高度。

  • align-content：多根轴线的对齐方式

    1. flex-start: 与交叉轴的起点对齐
    2. flex-end: 与交叉轴的终点对齐。
    3. center: 与交叉轴的中点对齐。
    4. space-between: 与交叉轴两端对齐，轴线之间的间隔平均分布。
    5. space-around: 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
    6. stretch: 默认 轴线占满整个交叉轴。
• 子元素的属性:
  • order：子容器的排列顺序,数值越小，排列越靠前，默认为 0
  • flex-grow：子容器剩余空间的拉伸比例,按照该比例给子容器分配空间
  • flex-shrink：子容器超出空间的压缩比例(此属性要生效，父容器的 flex-wrap 属性要设置为 nowrap)
  • flex-basis：子容器在不伸缩情况下的原始尺寸,主轴为横向时代表宽度，主轴为纵向时代表高度。
  • flex：flex-grow flex-shrink flex-basis (集结起来)
  • align-self:属性允许单个项目有与其他项目不一样的对齐方式，可覆盖父容器 align-items 属性:
    1. auto: 默认，继承父元素的 align-items 属性
    2. flex-start: 交叉轴的起点对齐。
    3. flex-end: 交叉轴的终点对齐。
    4. center: 交叉轴的中点对齐。
    5. baseline: 项目的第一行文字的基线对齐。
    6. stretch: 如果项目未设置高度或设为auto，将占满整个容器的高度。

3. grid 网格布局(网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align、column和clear等设置都将失效。)

核心组成: wrapper（父元素）和 items（子元素）。 wrapper 是实际的 grid(网格)，items 是 grid(网格) 内的内容。

• 基本属性:
  1. grid-template-columns:多少列,没有设置，默认只有一列，宽度为父元素的 100%
  2. grid-template-rows:多少行
  3. 间距grid-gap:
     • grid-row-gap：行与行之间的距离。
     • grid-column-gap：创建列与列之间的距离。
• 配合的函数:
  1. minmax()函数: 创建行或列的最小或最大尺寸，第一个参数定义网格轨道的最小值，第二个参数定义网格轨道的最大值(可以接受任何长度值)。auto 值允许网格轨道基于内容的尺寸拉伸或挤压。:
     1. 父元素高度>两行最大值之和，那么第一列和第二列的高度都为设置的最大值
     2. 父元素高度<两行最大值之和,a=height(父元素)-两行最小值之和
        第一行高度h1=最小值+a/2
        第二行高度h2=最小值+a/2
  2. repeat()函数: 创建重复的网格轨道。这个适用于创建相等尺寸的网格项目和多个网格项目。接受两个参数：第一个参数定义网格轨道应该重复的次数，第二个参数定义每个轨道的尺寸。
• 通过网格线定位 grid item
  • grid-row: grid-row-start grid-row-end
  • grid-column: grid-column-start grid-column-end
  • grid-area: grid-row-start grid-column-start grid-row-end grid-column-end
• 合并单元行与合并单元列（需要设置在 grid item 中）:即让单个子元素变大
  属性同上
• 自定义网格线名称: 网格线名称一定要使用 [] 括住
  位置:放在每个值前面
• grid-template-areas 定义网格区域
  通过 grid-template-areas 属性来定义网格区域的名称，然后需要放在对应网格区域的元素，可以通过 grid-area 属性来指定。而且重复区域可以使用同一个名称来实现跨区域。另外对于空的轨道区域，可以使用点号 . 来代表

.container {
            text-align: center;
            padding: 20px;
            display: grid;
            grid-column-gap: 5px;
            grid-row-gap: 5px;
            background: pink;
            grid-template-areas: "header header header header header"
                                 "sidebar content content content content"
                                 "footer footer footer footer footer";
            grid-template-rows: 50px 150px 50px;
            grid-template-columns: 200px 200px 200px;
        }

• table布局:(可配合vertical-align来对齐)
  • 值:
    1. table 相当于“table”标签
    2. table-row 相当于“tr”标签
    3. table-cell 相当于“td”标签
    4. table-row-group 此元素会作为一个或多个行的分组显示 tbody
    5. table-heightder-group 此元素会作为一个或多个行的分组显示 thead
    6. table-footer-grounp 此元素会作为一个或多个行的分组显示 tfoot
    7. table-column-grounp 此元素会作为一个或多个列的分组显示 colgroup
    8. table-column 此元素会作为一个单元格列显示=>col
    9. table-caption 此元素会作为一个表格标题显示=》caption
  • 注意点:
    1. display: table时 对应元素的padding会失效；
    2. display: table-row时 对应元素的padding、margin会失效；
    3. display: table-cell时 对应元素的margin会失效；
    4. displaty: table-cell不要与float,position: absolute等改变布局的属性同时使用，作用会被破坏
  • 表格样式:
    • border
    • border-collapse: 设置是否将表格边框折叠为单一边框
    • text-align: 设置水平对齐方式，比如左对齐、右对齐或者居中
    • vertical-align: 设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐
    • padding
    • border-spacing: 设置分隔单元格边框的距离
    • caption-side: 设置表格标题的位置
    • empty-cells: 设置是否显示表格中的空单元格
    • table-layout: 设置显示单元、行和列的算法

移动端自适应 开发原则:文字流式，控件弹性，图片等比缩放

• 参考链接:
  移动端设配

利用视口单位适配页面

1. 采用rem
   • 在html(根)选择器里设置font-size,并且用媒体查询设置不同分辨率下html的font-size(或者使用js来设置),接下来就是子元素全部运用rem来设置
     rem的值经常等于(设备的宽度)x100/(设计稿宽度)
2. 使用vw作为CSS单位(无论是文本还是布局高宽、间距等)
3. 搭配vw和rem，优化布局