响应式开发基础掌握了pc端和移动端的布局，面对一些不太复杂的页面，我们想让它在pc端显示又能在移动端显示，这就需要一个响

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

例如：

UE：www.uedna.com/

jQuery：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;
    }
}

媒体特性(常用)

全部：www.runoob.com/cssref/css3…

宽度

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 :element.eleme.cn/#/zh-CN
- vue3:
  - 社区版：element3-ui.com/#/
  - Element UI plus :element-plus.gitee.io/#/zh-CN

响应式开发基础

技术栈