响应式开发基础

掌握了pc端和移动端的布局，面对一些不太复杂的页面，我们想让它在pc端显示又能在移动端显示，这就需要一个响应式的开发。同一个网页，根据浏览设备的不同，屏幕尺寸不同，显示不同样式，尽可能显示全部内容，做到不论那个屏幕大小，都能正常显示。

例如：

UE：www.uedna.com/

jQuery：https://jquery.com/

Bootstrap: www.bootcss.com/

pc端：

移动端：

技术栈

• @media - css3 媒体查询（核心）
• 移动端的视口设置相关知识
• 布局方案
  • 弹性盒模型和老版本的兼容
  • 百分比占比
  • rem单位适配
  • 前端流行框架

媒体查询

设置不用尺寸或者不同设备下，显示的样式

媒体设备

• all 所有类型的设备 （一般用all就可以了）
• screen 彩屏设备
• print 打印预览
• speech 屏幕阅读

媒体查询关键词

• and - 并且，在多个条件的时候，可以用 and 连接，表示以上条件都满足就加载样式

//在所有设备中并且屏幕尺寸大于等于为1024px 才会显示绿色
@media all and (min-width:1024px){
    #list{
        background: green;
    }
}

• ,- 或，表示只要满足其中一个条件，就可以加载样式

• //在屏幕尺寸大于等于为1024px,或者小于等于400px 才会显示绿色
  @media (min-width:1024px),(max-width:400px){
      #list{
          background: green;
      }
  }
  

• not - 非，表示只要不是某一个条件的情况下，其他条件都可以加载样式

//在非彩屏设备，才会显示绿色
@media not screen {
    #list{
        background: green;
    }
}

• only - 只有，表示只有在某个条件下，才可以加载样式

//只在彩屏设备，才会显示绿色
@media only screen {
    #list{
        background: green;
    }
}

媒体特性(常用)

全部：https://www.runoob.com/cssref/css3-pr-mediaquery.html

• 宽度

  • min / max - width 最小 / 最大宽度

  • min / max - device - width 设备最小 / 最大宽度

  • 不同尺寸下的适配

     /* 屏幕宽度小于768*/
           @media (max-width:768px) {
               #list li{
                   width: 100%;
               }
           }
            /* 屏幕宽度大于768小于1024*/
            @media (min-width:768px) and (max-width: 1024px) {
                #list li{
                    width: 50%;
                }
            }
            /* 屏幕宽度大于1024px*/
            @media (min-width: 1024px) {
                #list{
                    width: 1024px;
                }
                #list li{
                    width: 25%;
                }
            }
    

• 横竖屏

  • orientation
    • portrait 竖屏
    • landscape 横屏
  • 注意：媒询中的横竖屏检测，是根据可视区宽高比计算的，当可视区宽度大于高度，会认定为横屏，当可视区高度大于宽度会认定为竖屏。
    • 但我们输入信息，弹出软键盘时候，屏幕可视区宽度就会被压缩，这个时候会出现可视区宽度大于可视区高度的情况，然后就会切换横屏
    • 除了ipad 设备，尽量少用这个属性，利用js去检测横竖屏

• 像素比

  • -webkit-min-device-pixel-ratio

  • 1px 问题也可以通过这个方法解决，不同像素比下边框像素不一样

    @media (-webkit-device-pixel-ratio: 2) {
        #list {
            border: 1px solid red;
        }
    }
    @media (-webkit-device-pixel-ratio: 3) {
        #list {
            border: .6666px solid red;
        }
    }
    @media (-webkit-device-pixel-ratio: 4) {
        #list {
            border: .25px solid red;
        }
    }
    

媒体查询样式表引入

• 层叠覆盖

  样式表从小到大引入， 将需要改变大小的样式，在中大样式表中写相同的样式进行覆盖

  	<link rel="stylesheet" href="index_min.css">
  	<link rel="stylesheet" href="index_md.css" media="(min-width:992px)">
  	<link rel="stylesheet" href="index_lg.css" media="(min-width:1336px)">
  

• 通过import 设定条件引入

  @import url("css/index.xs.css");
  @import url("css/index.md.css") (min-width: 992px);
  @import url("css/index.lg.css") (min-width: 1400px);
  

  ​ 必须是写在样式表的最前面

• 直接在写样式的时候设定条件

  @media screen and (min-width:600px){	}
  

响应式开发小方案

• 美观留白

  在屏幕大小变化时候，最好设计一些留白

• 现今主流屏幕尺寸

  根据主流屏幕尺寸的不同，设计不同的样式表，根据实际情况进行调整。

  

  	大屏	中等屏	小屏幕	超小屏
  对应设备	大屏显示器（台机）	笔记本显示屏	ipad	手机	对应尺寸	>=1200px	>=992px	>=768px	<768px	显示尺寸	1170px	970px	750px	auto

  • 方案一 从小到大布局

    div{
        width: 100%;
        height: 80px;
        background: pink;
        margin: 0 auto;
    }
    @media screen and (min-width:768px){
        div{
            width: 750px;
        }
    }
    @media screen and (min-width:992px){
        div{
            width: 970px;
        }
    }
    @media screen and (min-width:1200px){
        div{
            width: 1170px;
        }
    }
    

  • 方案二 从大到小布局

    div{
        width: 1170px;
        height: 50px;
        background: pink;
        margin: 0 auto;
    }
        
    @media screen and (max-width:1200px){
        div{
            width: 970px;
        }
    }
    @media screen and (max-width:992px){
        div{
            width: 750px;
        }
    }
    @media screen and (max-width:768px){
        div{
            width: 100%;
        }
    }
    

前端流行框架

• bootstrap v4.bootcss.com/

  • 兼容

    @media是css3新增样式，兼容到IE9+，但是并不是说，我们不能让低版本浏览器支持

    这里需要引入两个文件：

    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    

    • html5shiv：用 JS 创建H5标签，让低版本浏览器支持
    • respond：支持响应，利用JS判断屏幕尺寸是否发生变化

• ant-design ant.design/index-cn

• Element UI 2+3

  • vue2 :https://element.eleme.cn/#/zh-CN
  • vue3:
    • 社区版：https://element3-ui.com/#/
    • Element UI plus :https://element-plus.gitee.io/#/zh-CN

案例(后续补充中...)