响应式布局

响应式布局

一、响应式布局介绍

各种布局场景

1. 纯PC端布局

布局特点：

布局区域是固定的 950 - 1200 样式的兼容

2. 纯移动端布局

布局特点：

1. 屏幕尺寸兼容 rem vh vw

2. 弹性盒子flex

3. 怪异盒模型

3. 响应式布局 PC-》移动自由切换

布局特点：

1. 流式布局 宽度 变为百分比 实现页面的快速 缩放

2. 能够检测屏幕尺寸大小，在不同的屏幕尺寸范围内，给界面中的标签盒子，设置特定样式

3. 常见设置的三类样式

   • 盒子宽度的百分比值

   • 盒子的出现和消失

   • 盒子中字体大小的配置 rem单位

4. UI设计规范中的屏幕尺寸范围

• 移动端（手机-》ipad）<768px 以下 -xs

• 小型屏幕 768-992px 之间 -sm

• 中型屏幕 992-1200px 之间 -md

• 大型屏幕 >1200px 以上 -lg

二、媒体查询技术

媒体查询的核心功能，是能够自动检测当前html文档的显示环境，而导入不同的CSS样式 环境类型

1. 媒介类型

   • screen 电子屏幕

   • print 打印机

2. 同一媒介的不同状态

   • screen 屏幕： 屏幕尺寸、屏幕方向

媒体查询引入方式

• 方式一：写在style标签内部的 media属性中

  <!-- 基本公式  <style media="查询条件"> */ -->
   <!-- /* 所有媒介都可见 不写media属性 */ -->
    <style>
        .box{
            width:100px;
            height:100px;
        }
    </style>
    <!-- 仅在屏幕中显示时有效 -->
    <style media="screen">
        .box{
            background:red;
        }
    </style>
    <!-- 仅在打印中显示时有效 -->
    <style media="print">
        .box{
            background:yellow;
        }
    </style>

• 方式二：写在link标签内部的 media属性中，有条件引入不同外部样式表

<!-- <link media="查询条件"> -->
<!-- 所有媒介都引入 -->
 <link rel="stylesheet" href="c.css">
 <!-- 仅屏幕显示时引入 -->
 <link rel="stylesheet" href="a.css" media="screen">
 <!-- 仅打印机显示时引入 -->
 <link rel="stylesheet" href="b.css" media="print">

• 方式三：写在内部样式表中 @media 中。有条件的渲染不同的样式

/* @media 查询条件{样式列表} 条件和 media关键字要有空格 */
   /* 所有媒介都见 */
   .box{
       width:100px;
       height:100px;
   }
   /* 在屏幕下可见 */
   @media screen{
       .box{
           background:red;
       }
   }
   /* 在打印机下可见 */
   @media print{
       .box{
           background:yellow;
       }
   }

所有媒体查询代码，要写在默认样式之后（link style 内部样式表的）

媒体查询监测屏幕尺寸

<link media="screen and （屏幕尺寸查询条件）">
​
   <style media="screen and （屏幕尺寸查询条件）"></style>
​
​
   <style>
       @media screen and (屏幕尺寸查询条件){
           选择器1{}
           选择器2{}
       }
   </style>

条件写法

1. 屏幕尺寸 > 指定值 ： screen and (min-width:指定值)

2. 屏幕尺寸 <= 指定值：screen and (max-width:指定值)

3. 屏幕尺寸 == 指定值：screen and (width:指定值)

4. 指定值1 < 屏幕尺寸 < 指定值2 : screen and (min-width:指定值1) and (max-width:指定值2)

栅格系统

将屏幕均分成12等分，定义出12个宽度选择器，同行排列，没有间隙 细节

• 12等分的选择器外，要包含父级容器row

  1. 保证子级12列的同行排列特性

  2. 保证的匹配子级内容间的间隙位置特性margin：0 -15px

• 12等分选择器

  1. 保证子级格子是具备同行排列能力的（考虑低版IE本兼容）

  2. 保证每个格子的内容之间有间隙，增加了一个block标签容器，给它设置左右的padding