CSS变量
具体语法见 张鑫旭-了解css var
- css可以通过
--*声明通过var(--*)使用css变量 - 变量的优先级和css选择器类似
- 变量可以嵌套使用
- 使用cacl很重要例如
calc( var(--num)*1px )
媒体查询
在bootstrap、或者element中使用类进行响应式布局，类似于下面这样
/* 这种思路很常见 */
.col-4 {
width:25% }
.col-6 {
width:50% }
.col-12 {
width:100% }
@media (min-width: 900px){
.col-md-4 {
width:25% }
.col-md-6 {
width:50% }
.col-md-12 {
width:100% }
}
虽然width:25%这种写法很方便，现在假设一个场景，你需要在断点处将四列变成两列的同时让字体也同时变小
.text{
font-size:16px;
}
.col-4 {
width:25% }
.col-6 {
width:50% }
.col-12 {
width:100% }
@media (min-width: 900px){
.text{
font-size:12px;
}
.col-md-4 {
width:25% }
.col-md-6 {
width:50% }
.col-md-12 {
width:100% }
}
css变量 + 媒体查询
使用变量可以很容易的优化代码
:root{
--bs-colums-num:12;
}
.text{
/* 这里就将字体和列的变化关联起来了 */
font-size: calc( ( 12 / var(--bs-colums-num) ) * 4 );
}
.col{
width: calc( 100% / var(--bs-colums-num) );
}
.col-4 {
--bs-colums-num:4 }
.col-6 {
--bs-colums-num:6 }
.col-12 {
--bs-colums-num:12 }
@media (min-width: 900px){
.col-md-4 {
--bs-colums-num:4 }
.col-md-6 {
--bs-colums-num:6 }
.col-md-12 {
--bs-colums-num:12 }
}
DEMO
这里模仿bootstrap和element的布局 ，使用变量的方式进行实现，有兴趣的可以看下代码
col 会自动填充既flex-grow:1，col-f则没有这个效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.container {
background-color: #eee;
}
.content {
width: 70%;
margin: 0 auto;
min-height: 100vh;
background-color: white;
}
.list {
margin: 0 20px;
padding: 20px;
border: 1px gray solid;;
box-sizing: border-box;
}
.item {
text-align: center;
line-height: 30px;
border: 1px #ccc solid;
box-sizing: border-box;
}
h3 {
padding: 10px 20px;
}
</style>
<style>
/*
这里只对列和间距做了响应式处理，至于布局，直接在row加个类自己适配吧
*/
:root {
--bs-gutter-x: 0px;
--bs-gutter-y: 0px;
--bs-column-num: 4;
--bs-gap-5: 5px;
--bs-gap-10: 10px;
--bs-gap-15: 15px;
--bs-gap-20: 20px;
}
.row {
display: flex;
flex-wrap: wrap;
gap: var(--bs-gutter-y) var(--bs-gutter-x);
}
.row>.col {
flex-grow: 1;
flex-shrink: 0;
width: calc((100% - ((var(--bs-column-num) - 1) * var(--bs-gutter-x))) / var(--bs-column-num));
}
/* col 会自动填充既flex-grow，col-f则没有这个效果 */
.row>.col-f {
flex-shrink: 0;
width: calc((100% - ((var(--bs-column-num) - 1) * var(--bs-gutter-x))) / var(--bs-column-num));
}
/* 默认列 */
.col-12 {
--bs-column-num: 1;
}
.col-6 {
--bs-column-num: 2;
}
.col-4 {
--bs-column-num: 3;
}
.col-3 {
--bs-column-num: 4;
}
.col-2 {
--bs-column-num: 6;
}
.col-1 {
--bs-column-num: 12;
}
/* 默认间距 */
.gx-5 {
--bs-gutter-x: var(--bs-gap-5);
}
.gx-10 {
--bs-gutter-x: var(--bs-gap-10);
}
.gx-15 {
--bs-gutter-x: var(--bs-gap-15);
}
.gx-20 {
--bs-gutter-x: var(--bs-gap-20);
}
.gy-5 {
--bs-gutter-y: var(--bs-gap-5);
}
.gy-10 {
--bs-gutter-y: var(--bs-gap-10);
}
.gy-15 {
--bs-gutter-y: var(--bs-gap-15);
}
.gy-20 {
--bs-gutter-y: var(--bs-gap-20);
}
/* 大于900 */
@media (min-width: 900px) {
/* 列 */
.row .col-md-12 {
--bs-column-num: 1;
}
.row .col-md-6 {
--bs-column-num: 2;
}
.row .col-md-4 {
--bs-column-num: 3;
}
.row .col-md-3 {
--bs-column-num: 4;
}
.row .col-md-2 {
--bs-column-num: 6;
}
.row .col-md-1 {
--bs-column-num: 12;
}
/* 间距 */
.row.gx-md-5 {
--bs-gutter-x: var(--bs-gap-5);
}
.row.gx-md-10 {
--bs-gutter-x: var(--bs-gap-10);
}
.row.gx-md-15 {
--bs-gutter-x: var(--bs-gap-15);
}
.row.gx-md-20 {
--bs-gutter-x: var(--bs-gap-20);
}
.row.gy-md-5 {
--bs-gutter-y: var(--bs-gap-5);
}
.row.gy-md-10 {
--bs-gutter-y: var(--bs-gap-10);
}
.row.gy-md-15 {
--bs-gutter-y: var(--bs-gap-15);
}
.row.gy-md-20 {
--bs-gutter-y: var(--bs-gap-20);
}
}
/* 大于1200 */
@media (min-width: 1200px) {
/* 列 */
.row .col-lg-12 {
--bs-column-num: 1;
}
.row .col-lg-6 {
--bs-column-num: 2;
}
.row .col-lg-4 {
--bs-column-num: 3;
}
.row .col-lg-3 {
--bs-column-num: 4;
}
.row .col-lg-2 {
--bs-column-num: 6;
}
.row .col-lg-1 {
--bs-column-num: 12;
}
/* 间距 */
.row.gx-lg-5 {
--bs-gutter-x: var(--bs-gap-5);
}
.row.gx-lg-10 {
--bs-gutter-x: var(--bs-gap-10);
}
.row.gx-lg-15 {
--bs-gutter-x: var(--bs-gap-15);
}
.row.gx-lg-20 {
--bs-gutter-x: var(--bs-gap-20);
}
.row.gy-lg-5 {
--bs-gutter-y: var(--bs-gap-5);
}
.row.gy-lg-10 {
--bs-gutter-y: var(--bs-gap-10);
}
.row.gy-lg-15 {
--bs-gutter-y: var(--bs-gap-15);
}
.row.gy-lg-20 {
--bs-gutter-y: var(--bs-gap-20);
}
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<h3>使用row+col组合默认平分父容器宽度</h3>
<div class="list row">
<div class="item col">4</div>
<div class="item col">4</div>
<div class="item col">4</div>
</div>
<h3>使用row-x默认平分父容器宽度 列总和为12 x为占这12的几份 </h3>
<div class="list row">
<div class="item col-f col-12">12</div>
<div class="item col-f col-6">6</div>
<div class="item col-f col-6">6</div>
<div class="item col-f col-3">3</div>
<div class="item col-f col-3">3</div>
<div class="item col-f col-3">3</div>
<div class="item col-f col-3">3</div>
</div>
<h3>使用给row添加gx-num、gy-num类可给容器添加边距</h3>
<h3>现在只用 5、10、15、20这些边距 可以再:root中声明 </h3>
<div class="list row gx-10 gy-10">
<div class="item col-f col-12">12</div>
<div class="item col-f col-6">6</div>
<div class="item col-f col-6">6</div>
<div class="item col-f col-3">3</div>
<div class="item col-f col-3">3</div>
<div class="item col-f col-3">3</div>
<div class="item col-f col-3">3</div>
</div>
<h3>使用col-md、col-lg可以添加响应式布局</h3>
<div class="list row gx-10 gy-10">
<div class="item col-f col-12 col-md-6 col-lg-3">3</div>
<div class="item col-f col-12 col-md-6 col-lg-3">3</div>
<div class="item col-f col-12 col-md-6 col-lg-3">3</div>
<div class="item col-f col-12 col-md-6 col-lg-3">3</div>
</div>
</div>
</div>
</body>
</html>