1.响应式布局
1.常见的布局方案
2.常用的几个布局原则
3.媒体查询
4.响应式布局
5.示例代码
<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>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
/*注意这里的and两边必须有空格*/
@media screen and (min-width:1000px) {
body {
background-color: yellow;
}
}
@media screen and (max-width:1000px) and (min-width:500px) {
body {
background-color: red;
}
}
@media screen and (max-width:500px) {
body {
background-color: green;
}
}
</style>
</head>
<body>
</body>
- 横屏与竖屏
<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>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-wrap: wrap;
}
div {
height: 100px;
background-color: yellow;
border: 2px solid red;
box-sizing: border-box;
/* width: 25%; */
}
/* 竖屏 */
@media screen and (orientation:portrait) {
div {
width: 33.333%;
}
}
/* 横屏 */
@media screen and (orientation:landscape) {
div {
width: 25%;
}
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
2.响应式布局案例
<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>
* {
margin: 0;
padding: 0;
}
.top {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.top>div {
width: 49%;
}
.top img {
width: 100%;
}
.right {
display: flex;
justify-content: space-between;
}
.right>img {
width: 49%;
}
@media screen and (max-width:768px) {
.top>div {
width: 100%;
}
}
.bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.bottom>div {
width: 23%;
padding: 5px;
box-sizing: border-box;
border: 1px solid grey;
margin-top: 10px;
box-shadow: 0 0 5px black;
}
.bottom img {
width: 100%;
}
@media screen and (max-width:1024px) and (min-width:768px) {
.bottom>div {
width: 31%;
}
}
@media screen and (max-width:768px) and (min-width:450px) {
.bottom>div {
width: 48%;
}
}
@media screen and (max-width:450px) {
.bottom>div {
width: 90%;
}
}
</style>
</head>
<body>
<!--
top:flex wrap
>768px 左49% 右边49%
< 上100% 下100%
bottom:flex,wrap
>1024 23%*4
>768 <1024 31%*3
>450 <768 48%*2
<450 90%*1
-->
<div class="top">
<div class="left">
<img src="../img/2054377.jpg" alt="">
</div>
<div class="right">
<img src="../img/2054509.jpg" alt="">
<img src="../img/2054783.jpg" alt="">
</div>
</div>
<div class="bottom">
<div>
<img src="../img/2055030.jpg" alt="">
<span>我滴任务完成啦</span>
</div>
<div>
<img src="../img/2055077.jpg" alt="">
<span>我滴任务完成啦</span>
</div>
<div>
<img src="../img/2055090.jpg" alt="">
<span>我滴任务完成啦</span>
</div>
<div>
<img src="../img/2055093.jpg" alt="">
<span>我滴任务完成啦</span>
</div>
</div>
</body>
3.em与rem
<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>
html {
font-size: 16px;
}
.div1,
.div2 {
border: 1px solid red;
font-size: 16px;
}
.div1 p {
font-size: 32px;
}
.div2 p {
/* font-size: 2em; */
font-size: 2rem;
}
</style>
</head>
<body>
<!--
px em rem
px:css像素
em:相对单位,相对于父元素的字体大小
rem:相对单位,相对于根元素(html)字体大小
-->
<div class="div1">
<p>1111</p>
</div>
<div class="div2">
<p>2222</p>
</div>
</body>
- 相关插件
<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>
* {
margin: 0;
padding: 0;
}
.box {
width: 3.75rem;
height: 6.25rem;
background-color: yellow;
width: 46.875rem;
}
html {
font-size: 16px;
}
body {
font-size: 1rem;
}
</style>
<script>
// fontSize计算代码
document.documentElement.style.fontSize = document.documentElement.clientWidth / 375 * 16 + 'px'
//font-size=档期啊 设备的css布局宽度/物理分辨率(设计稿的宽度)*基准font-size
</script>
</head>
<body>
<div class="box">
赵钱孙李
</div>
</body>
4.足球圈rem案例
- rem===等比例缩放
<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>
<link rel="stylesheet" href="../font-icon/font_3573520_gov0k2wzlya/iconfont.css">
</head>
<body>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column
}
header {
height: 2.2rem;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
}
/* header */
header div {
width: 3rem;
height: 1.25rem;
line-height: 1.25rem;
text-align: center;
color: white;
font-size: .6rem;
}
header div:nth-child(1) {
border-radius: .65rem 0 0 .65rem;
background-color: #63d985;
}
header div:nth-child(2) {
border-radius: 0 .65rem .65rem 0;
background-color: #3dd066;
opacity: 0.9;
}
/* section */
section {
flex: 1;
overflow: auto;
}
section ul {
display: flex;
text-align: center;
height: 1.75rem;
line-height: 1.75rem;
justify-content: space-around;
border-bottom: .05rem solid #d9d9d9;
font-size: .7rem;
position: sticky;
top: 0rem;
background-color: white;
}
section ul li {
flex: 1;
}
/* 默认选中 */
section ul li:nth-child(1) {
color: green;
border-bottom: .15rem solid #3dd066;
}
section li:hover {
color: green;
border-bottom: .15rem solid #3dd066;
}
section div {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
text-align: center;
align-items: center;
}
section div>div {
margin-top: .2rem;
}
section div div {
width: 49%;
border: 1ps solid grey;
/* margin-top: .2rem; */
}
section div img {
height: 11.35rem;
width: 100%;
border: 1ps solid grey;
}
section div div p {
width: 100%;
border: .05rem solid rgba(128, 128, 128, 0.295);
height: 1.5rem;
line-height: 1.5rem;
font-size: .6rem;
}
/* footer */
footer {
height: 2.2rem;
background: white;
color: #d5d5d7;
}
footer ul {
display: flex;
}
footer li {
height: 100%;
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
align-items: center;
}
footer li i {
height: 1.05rem;
font-size: .8rem;
line-height: 1.05rem;
}
footer li span {
font-size: .6rem;
height: .85rem;
line-height: .85rem;
}
footer li:hover {
color: #08ca43;
}
footer li:nth-child(3) {
height: 2.5rem;
width: 2.5rem;
border: .05rem solid grey;
border-radius: 50%;
position: relative;
line-height: 2.5rem;
top: -0.7rem;
background-color: white;
}
footer li:nth-child(3) i {
font-size: 1.5rem;
}
html {
font-size: 20px;
}
.iconfont {
font-size: .8rem;
}
</style>
<script>
// fontSize计算代码
document.documentElement.style.fontSize = document.documentElement.clientWidth / 375 * 20 + 'px'
//font-size=档期啊 设备的css布局宽度/物理分辨率(设计稿的宽度)*基准font-size
</script>
<header>
<div>热点</div>
<div>关注</div>
</header>
<section>
<ul>
<li>足球现场</li>
<li>足球生活</li>
<li>足球美女</li>
</ul>
<div class="list">
<div>
<img src="../img/2054377.jpg" alt="">
<p>方天画戟</p>
</div>
<div>
<img src="../img/2054509.jpg" alt="">
<p>小丸子</p>
</div>
<div>
<img src="../img/2054783.jpg" alt="">
<p>千鸟</p>
</div>
<div>
<img src="../img/2055030.jpg" alt="">
<p>也许</p>
</div>
<div>
<img src="../img/2055077.jpg" alt="">
<p>悲哀</p>
</div>
<div>
<img src="../img/2055090.jpg" alt="">
<p>不过</p>
</div>
<div>
<img src="../img/2055093.jpg" alt="">
<p>伤害</p>
</div>
<div>
<img src="../img/2055094.jpg" alt="">
<p>天下</p>
</div>
</div>
</section>
<footer>
<ul>
<li>
<i class="iconfont icon-shouye1"></i>
<span>首页</span>
</li>
<li>
<i class="iconfont icon-sousuo"></i>
<span>发现</span>
</li>
<li>
<i class="iconfont icon-xiangji1"></i>
</li>
<li>
<i class="iconfont icon-wode"></i>
<span>我的</span>
</li>
<li>
<i class="iconfont icon-shibai"></i>
<span>退出</span>
</li>
</ul>
</footer>
</body>
5.vw和vh
- vw与vh是view-width与view-height的缩写
-
100vh==视口的高度
-
100vw==视口的宽度
-
<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>
* {
margin: 0;
padding: 0;
}
html {
font-size: 26.67vw;
}
div {
width: 3.75rem;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div></div>
</body>
- 与百分比的区别:百分比实际上是作用于父盒子,主要在于滚动条的区别
<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>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 1000px;
height: 300px;
background-color: red;
}
.box2 {
width: 1000px;
height: 300px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<!-- 主要区别是在有没有滚动条时,100%是不包含滚动条的,占满剩余空间,vw是包含滚动条的 -->
</body>
6.渐变
1.线性渐变
<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>
div {
width: 300px;
height: 300px;
border: 10px solid grey;
/* 可以使用逗号无限添加颜色 */
/* 第一个参数表示方向,默认(不写是从上到下),
to top,
to right,
to top right ... */
/* 还可以使用角度来进行渐变:0deg(注意单位之间不能加空格) */
background: linear-gradient(10deg, red, yellow, blue, green, purple);
}
</style>
</head>
<body>
<div></div>
</body>
2.径向渐变
3.重复渐变
7.太极案例
<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>
body {
background-color: lightblue;
}
div {
width: 200px;
height: 200px;
background: linear-gradient(white 50%, black 50%);
margin: 10px auto;
display: flex;
align-items: center;
border-radius: 50%;
}
div::before {
content: "";
width: 100px;
display: block;
height: 100px;
width: 100px;
background: radial-gradient(white 25%, black 30%);
border-radius: 50%;
}
div::after {
content: "";
width: 100px;
display: block;
height: 100px;
width: 100px;
background: radial-gradient(black 25%, white 30%);
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
</body>
8.过渡
<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>
div {
width: 200px;
height: 200px;
background-color: red;
transition: all 2s linear;
}
/* all所有属性,除了display:none/block
2s动画时间
linear匀速
2s延迟加载 */
div:hover {
height: 600px;
height: 400px;
background-color: yellow;
}
</style>
</head>
<body>
<div></div>
</body>
- 使用单一属性:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background:yellow;
transition-property: height background;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 2s;
}
div:hover{
height: 600px;
background:red;
}
</style>
</head>
<body>
<div></div>
</body>
9.动画过渡类型
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{
list-style: none;
}
li{
width: 200px;
height: 50px;
border:1px solid gray;
}
ul:hover li:nth-child(1){
width: 600px;
transition:all 2s linear;
}
ul:hover li:nth-child(2){
width: 600px;
transition:all 2s ease;
}
ul:hover li:nth-child(3){
width: 600px;
transition:all 2s ease-in;
}
ul:hover li:nth-child(4){
width: 600px;
transition:all 2s ease-out;
}
ul:hover li:nth-child(5){
width: 600px;
transition:all 2s ease-in-out;
}
ul:hover li:nth-child(6){
width: 600px;
transition:all 2s cubic-bezier(.51,1.19,.73,.49);
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
10.2D属性–平移
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background:red;
transition:all 1s;
/* margin: 10px auto; */
transform: translateX(50px);
}
div:hover{
/* transform:translateX(100px) translateY(100px); */
transform: translate(100px,100px);
}
</style>
</head>
<body>
<div></div>
</body>
- 面试题:与relative的区别
- 设置left–合成图层
- 设置translate–独立图层
11.2D属性–缩放
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
/* height: 300px; */
border:5px solid red;
margin:100px auto;
overflow:hidden;
}
img{
width: 100%;
transition:all 2s;
transform-origin:center;
/*
改变中心点的位置
center
left top
left bottom
left center
right top
right bottom
right center
*/
}
div:hover img{
/* width: 150%; */
transform: scale(1.5);
/* 负值-倒像放大效果
支持x轴 y轴单独放大
scaleX
scaleY
*/
/* transform: scaleY(1.5); */
}
</style>
</head>
<body>
<div>
<img src="1.png" alt="">
</div>
</body>
12.2D属性–旋转
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background:lightblue;
}
div{
width: 200px;
height: 200px;
background:linear-gradient(white 50%,black 50%);
margin:200px auto;
display: flex;
align-items: center;
border-radius: 50%;
transition:all 2s;
transform: rotateZ(0deg);
/* transform-origin: left top; */
/*
rotate 中心 ==== rotateZ
正值 顺时针
负值 逆时针
*/
/* transform: rotateY(0deg); */
}
div:hover{
transform: rotate(360deg);
}
div::before{
content:"";
display: block;
width:100px;
height: 100px;
background:radial-gradient(white 25%,black 30%);
border-radius: 50%;
}
div::after{
content:"";
display: block;
width:100px;
height: 100px;
background:radial-gradient(black 25%,white 30%);
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
</body>
13.折扇效果案例
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style: none;
}
ul{
margin:10px auto;
width: 600px;
height: 400px;
border:5px solid gray;
position: relative;
}
li{
width: 60px;
height: 200px;
position: absolute;
left: 50%;
margin-left: -30px;
bottom: 30px;
text-align: center;
transform-origin: bottom center;
/* 调整中心点 */
border-radius: 10px;
transition:all 2s;
}
/* 除了第7个, 其他的都透明 */
ul li:not(:nth-child(7)) {
opacity: 0;
}
ul:hover li {
opacity: 1;
}
ul li:nth-child(1),ul li:nth-child(13){
background:purple;
}
ul li:nth-child(2),ul li:nth-child(12){
background:darkblue;
}
ul li:nth-child(3),ul li:nth-child(11){
background:deeppink;
}
ul li:nth-child(4),ul li:nth-child(10){
background:deepskyblue;
}
ul li:nth-child(5),ul li:nth-child(9){
background:green;
}
ul li:nth-child(6),ul li:nth-child(8){
background:yellow;
}
ul li:nth-child(7){
background:red;
}
ul:hover li:nth-child(1){
transform: rotate(90deg);
}
ul:hover li:nth-child(13){
transform: rotate(-90deg);
}
ul:hover li:nth-child(2){
transform: rotate(75deg);
}
ul:hover li:nth-child(12){
transform: rotate(-75deg);
}
ul:hover li:nth-child(3){
transform: rotate(60deg);
}
ul:hover li:nth-child(11){
transform: rotate(-60deg);
}
ul:hover li:nth-child(4){
transform: rotate(45deg);
}
ul:hover li:nth-child(10){
transform: rotate(-45deg);
}
ul:hover li:nth-child(5){
transform: rotate(30deg);
}
ul:hover li:nth-child(9){
transform: rotate(-30deg);
}
ul:hover li:nth-child(6){
transform: rotate(15deg);
}
ul:hover li:nth-child(8){
transform: rotate(-15deg);
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
</ul>
</body>
14.2D属性–多属性值的书写
- 写法是使用空格隔开,后面写的会覆盖前面写的,注意调整不同的顺序会出现不同的效果
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 600px;
height: 600px;
border:2px solid gray;
}
.box div{
width: 200px;
height: 200px;
background:red;
border:1px solid black;
}
.box div:nth-child(1){
transform: translateX(400px);
}
/*先位移后移动*/
.box div:nth-child(2){
transform: translateX(400px) scale(0.5);
}
/*先缩放,后移动*/
.box div:nth-child(3){
transform: scale(0.5) translateX(400px);
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
</body>
- 注意旋转后X,Y轴会改变
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 600px;
height: 600px;
border:2px solid gray;
}
.box div{
width: 100px;
height: 100px;
background:red;
border:1px solid black;
}
.box div:nth-child(1){
transform: translateX(400px);
}
.box div:nth-child(2){
transform: translateX(400px) rotate(45deg);
}
.box div:nth-child(3){
transform: rotate(45deg) translateX(400px);
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
</body>
15.2D属性–倾斜
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background: red;
line-height: 200px;
text-align: center;
border:1px solid black;
font-size: 50px;
margin:0 auto;
/* transform: skewY(30deg); */
transform: skew(30deg,30deg);
/* skewX 正值, 拽右下角, 往右边拉动, 形成30deg
skewY
skew(x,y) 正值, 拽右下角, 往右下边拉动, 形成30deg*/
}
</style>
</head>
<body>
<div>kerwin</div>
</body>
16.明星资料卡案例
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
img{
display: block;
}
.box{
width: 350px;
border:5px solid red;
margin:0 auto;
position: relative;
overflow: hidden;
}
.box img{
width: 100%;
transition:all 1s;
}
.box:hover img{
transform: translateX(50px);
opacity: 0.5;
}
.box h2{
position: absolute;
left: 50px;
top:10px;
color:white;
transition:all 1s 1s;
}
.box:hover h2{
/* left: 100px; */
transform: translateX(100px);
}
.box p{
position: absolute;
left:50px;
width: 100px;
color:white;
background: darkblue;
transition:all 1s;
}
.box .p1{
top:100px;
transform: translateY(400px);
}
.box:hover .p1{
/* top:100px; */
transform: translateY(0px);
}
.box .p2{
top:200px;
transform:translateX(500px);
}
.box:hover .p2{
transform:translateX(0px);
}
.box .p3{
top:300px;
transform: translateX(-500px);
}
.box:hover .p3{
/* top:300px; */
transform: translateX(0px);
}
</style>
</head>
<body>
<div class="box">
<img src="img/1.png" alt="">
<h2>title</h2>
<p class="p1">1111</p>
<p class="p2">2222</p>
<p class="p3">3333</p>
</div>
</body>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
img{
display: block;
}
.box{
width: 350px;
margin:0 auto;
border:5px solid red;
position: relative;
}
img,p,h2{
transition:all 1s;
}
.box .pic{
width: 100%;
}
.box:hover .pic {
transform: translateY(-20px);
opacity: 0.5;
}
.box h2{
position: absolute;
left:60px;
top:100px;
color:white;
transform: translateY(-200px);
}
.box:hover h2{
transform: translateY(0px);
}
.box p{
position: absolute;
bottom: 0px;
left:80px;
/* transform: translateY(30px); */
opacity: 0;
}
.box:hover p{
transform: translateY(-100px);
opacity: 1;
}
.box .musicBtn{
position: absolute;
right: 10px;
top:10px;
width: 40px;
height: 40px;
}
.box:hover .musicBtn{
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="box">
<img src="img/3.png" alt="" class="pic">
<div>
<h2>title</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non, nesciunt id, porro quo aliquam nisi obcaecati similique eaque suscipit natus modi distinctio eos aspernatur molestiae atque facere praesentium ut dolores!</p>
</div>
<img src="img/musicBtn.png" alt="" class="musicBtn">
</div>
</body>