重要！响应式开发
目录
- 重要！响应式开发
- 是什么？
- 怎么实现？
- 媒体
- 媒体查询
- 断点
- 是什么
- 适配方案
- 栅格布局
- 响应式栅格系统
- 实例
是什么？
多终端显示不同，更好看
PC，ipad，手机适配
怎么实现？
媒体查询，断点：
视口宽不同，布局不同
移动端？？？
320-480端口
rem
不考虑大尺寸，更好体验
响应式：三端都可以看，但是适配没有移动端好看
成本低
媒体
媒体查询
检测不同媒体视口宽度
- @media关键字
- 媒体类型
body{background-color: skyblue;color: #fff;}/*我们的设备是屏幕显示的css*/@media print{body{background-color: red;color: yellow;}/*打印机可见*/}
- 媒体特性
可以忽略
最小最大宽，横竖屏，像素比
要2，3均满足，需要逻辑运算符号链接
/*当前任意设备，但是屏幕要大于等于400px才显示*/@media screen and (min-width:400px){body{background-color: red;}}/*当前任意设备，但是屏幕要大于等于400px,小于等于500px才显示*/@media screen and (min-width:400px) and (max-width:500px){body{background-color: red;}}
像素比：移动端，根据手机的设备像素比设计css
横屏竖屏？
@media screen and (orientation:landscape){body{background-color: red;}}
断点
是什么
满足对应窗口，出现对应样式，一定写在正常css代码之后
根据行业经验总结约定俗成的常见断点
xs：<576px 超小屏
sm：576~768px 小屏
md：768px~992px 中屏
lg：992px~1200px 大屏
xl：>=1200px 超大屏
适配方案
PC端：一般PC端优先，然后慢慢适配小屏效果,只需要使用 max-width 即可
移动端：移动端优先： 先考虑最小屏，再考虑大屏；只需要使用 min-width 即可
栅格布局
把容器分成？份
每份占比
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.row{display: flex;flex-wrap: wrap;}.col{box-sizing: border-box;border: 1px solid;height: 200px;}/* <!-- 容器分成12份 --> *//* <!-- 1份占的宽 --> */.col-1{width: 8.3333333%;}.col-2{width: 16.666666667%;}.col-3{width: 25%;}.col-4{width: 33.3333333%;}.col-5{width: 41.66667%;}.col-6{width: 50%;}.col-7{width: 58.33333333333%;}.col-8{width: 66.6666667%;}.col-9{width: 75%;}.col-10{width: 83.3333333%;}.col-11{width: 91.6666667%;}.col-12{width: 100%;}</style>
</head>
<body>
<!-- 将容器分成12份 --><div class="row"><div class="col col-3">1</div><div class="col col-3">2</div><div class="col col-3">3</div><div class="col col-3">4</div></div><div class="row"><div class="col col-4">1</div><div class="col col-4">2</div><div class="col col-4">3</div></div><div class="row"><div class="col col-6">1</div><div class="col col-6">2</div></div><div class="row"><div class="col col-12">1</div></div>
</body>
</html>
响应式栅格系统
| xxl | xl | lg | md | sm | 无缀名 |
|---|---|---|---|---|---|
| x > 1400px | 1200 < x <= 1400 | 992 < x <=1200 | 768 < x <= 992 | 576 < x <= 768 | x <= 576 |
这些都是宽度的上限,只要小于上限就会起效
1400 1200 992 768 576
/*
第一：我们将页面分成12分
第二：我们选择的断点是行业标准断点
第三：我们选择的适配方案，是PC端优先
*//* ....这里的css样式，会在屏幕宽大于1400px时生效.... */.col-xxl-1 {width: 8.333333%;}.col-xxl-2 {width: 16.6666667%;}.col-xxl-3 {width: 25%;}.col-xxl-4 {width: 33.33333333%;}.col-xxl-5 {width: 41.66666667%;}.col-xxl-6 {width: 50%;}.col-xxl-7 {width: 58.33333333%;}.col-xxl-8 {width: 66.6666667%;}.col-xxl-9 {width: 75%;}.col-xxl-10 {width: 83.33333333%;}.col-xxl-11 {width: 91.66666667%;}.col-xxl-12 {width: 100%;}/* 当屏幕宽度大于1200px ，但小于等于1400px时，显示如下样式 */@media screen and (max-width: 1400px) {.col-xl-1 {width: 8.333333%;}.col-xl-2 {width: 16.6666667%;}.col-xl-3 {width: 25%;}.col-xl-4 {width: 33.33333333%;}.col-xl-5 {width: 41.66666667%;}.col-xl-6 {width: 50%;}.col-xl-7 {width: 58.33333333%;}.col-xl-8 {width: 66.6666667%;}.col-xl-9 {width: 75%;}.col-xl-10 {width: 83.33333333%;}.col-xl-11 {width: 91.66666667%;}.col-xl-12 {width: 100%;}}/* 当屏幕宽度大于992px ，但小于等于1200px时，显示如下样式 */@media screen and (max-width: 1200px) {.col-lg-1 {width: 8.333333%;}.col-lg-2 {width: 16.6666667%;}.col-lg-3 {width: 25%;}.col-lg-4 {width: 33.33333333%;}.col-lg-5 {width: 41.66666667%;}.col-lg-6 {width: 50%;}.col-lg-7 {width: 58.33333333%;}.col-lg-8 {width: 66.6666667%;}.col-lg-9 {width: 75%;}.col-lg-10 {width: 83.33333333%;}.col-lg-11 {width: 91.66666667%;}.col-lg-12 {width: 100%;}}/* 当屏幕宽度大于768px ，但小于等于992px时，显示如下样式 */@media screen and (max-width: 992px) {.col-md-1 {width: 8.333333%;}.col-md-2 {width: 16.6666667%;}.col-md-3 {width: 25%;}.col-md-4 {width: 33.33333333%;}.col-md-5 {width: 41.66666667%;}.col-md-6 {width: 50%;}.col-md-7 {width: 58.33333333%;}.col-md-8 {width: 66.6666667%;}.col-md-9 {width: 75%;}.col-md-10 {width: 83.33333333%;}.col-md-11 {width: 91.66666667%;}.col-md-12 {width: 100%;}}/* 当屏幕宽度大于576px ，但小于等于768px时，显示如下样式 */@media screen and (max-width: 768px) {.col-sm-1 {width: 8.333333%;}.col-sm-2 {width: 16.6666667%;}.col-sm-3 {width: 25%;}.col-sm-4 {width: 33.33333333%;}.col-sm-5 {width: 41.66666667%;}.col-sm-6 {width: 50%;}.col-sm-7 {width: 58.33333333%;}.col-sm-8 {width: 66.6666667%;}.col-sm-9 {width: 75%;}.col-sm-10 {width: 83.33333333%;}.col-sm-11 {width: 91.66666667%;}.col-sm-12 {width: 100%;}}/* 当屏幕宽度小于等于576px时，显示如下样式 */@media screen and (max-width: 576px) {.col-1 {width: 8.333333%;}.col-2 {width: 16.6666667%;}.col-3 {width: 25%;}.col-4 {width: 33.33333333%;}.col-5 {width: 41.66666667%;}.col-6 {width: 50%;}.col-7 {width: 58.33333333%;}.col-8 {width: 66.6666667%;}.col-9 {width: 75%;}.col-10 {width: 83.33333333%;}.col-11 {width: 91.66666667%;}.col-12 {width: 100%;}}运用实例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./media.css"><style>.row{display: flex;flex-wrap: wrap;}.col{box-sizing: border-box;background-color: skyblue;height: 100px;border: 1px solid #fff;}</style>
</head>
<body>
<!-- 将容器分成12份 -->
<!-- 大于 1200px 显示 3列
大于 992px 显示 2列
大于 768px 显示 1列 --><div class="row"><div class="col col-xl-4 col-lg-6 col-md-12">1</div><div class="col col-xl-4 col-lg-6 col-md-12">2</div><div class="col col-xl-4 col-lg-6 col-md-12">3</div></div></body>
</html>
实例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./media.css"><style>.row{display: flex;flex-wrap: wrap;}.col{box-sizing: border-box;background-color: skyblue;height: 100px;border: 1px solid #fff;}</style>
</head>
<body><!-- 12个，当视口宽 >1200px 时，以显示4 3 2 1当视口宽 <= 1200px 时，显示2 3 2 1当视口宽 <= 992px 时，显示2 2 1 1当视口宽 <= 768px 时，1 1 1 1同时上面的导航变成点击下拉菜单形式 --><div class="row">
<!-- 1200 768 xl sm --><div class="col col-xxl-3 col-xl-6 col-sm-12">1</div><div class="col col-xxl-3 col-xl-6 col-sm-12">1</div><div class="col col-xxl-3 col-xl-6 col-sm-12">1</div><div class="col col-xxl-3 col-xl-6 col-sm-12">1</div></div><div class="row">
<!--992 768 md sm --><div class="col col-xxl-4 col-md-6 col-sm-12">2</div><div class="col col-xxl-4 col-md-6 col-sm-12">2</div><div class="col col-xxl-4 col-md-6 col-sm-12">2</div></div><div class="row">
<!-- 992 lg --><div class="col col-xxl-6 col-lg-12">3</div><div class="col col-xxl-6 col-lg-12">3</div></div><div class="row"><div class="col col-xxl-12">4</div></div></body>
</html>p.s.其实twcss已经完美解决这个问题了，当然也可以自己外链media.css，都行
