媒体查询
<!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>
.box {
width: 200px;
height: 200px;
background-color: pink;
}
/* mediatype 设备类型 */
/* expressions 设备特性 */
/* @media not|only mediatype and (expressions) and(expressions)... {
CSS-Code;
} */
/* screen 设备屏幕 */
/* max-width 最大宽度 */
/* min-width 最小宽度 */
/* @media screen and (max-width:760px) {
.box {
width: 400px;
height: 200px;
background-color: #f00;
}
} */
/* @media screen and (min-width:320px) {
.box {
width: 100px;
height: 100px;
background-color: purple;
}
} */
@media screen and (min-width:320px) and (max-width:760px) {
.box {
width: 400px;
height: 400px;
background-color: #0f0;
}
}
/* 屏幕横向 */
@media screen and (orientation: landscape) {
.box {
background-color: orange;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
根据不同特性引用不同css
<!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="./02.css">
<!-- 通过媒体查询引用不同的css -->
<link rel="stylesheet" media="screen and (max-width:960px)" href="./022.css">
</head>
<body>
<div class="box"></div>
</body>
</html>
移动端布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 监听视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- - width=device-width:视口宽度和设备保持一直
- initial-scale=1.0:表示初始的缩放比例1.0;
- user-scalable=no:不允许用户进行缩放; -->
<title>Document</title>
</head>
<body>
<!-- 移动端布局 pc布局 -->
<!-- 物理像素 逻辑像素 -->
</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>
<style>
div{
width: 60px;
height: 60px;
border: 1px solid #000;
}
div img{
width: 100%;
}
</style>
</head>
<body>
<div>
<!-- <img src=".60X60t.png" alt=""> -->
<img src=".120X120t.png" alt="">
</div>
</body>
</html>
移动端布局2
<!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>
.box {
width: 400px;
height: 400px;
background-color: #f00;
}
.w1200 {
width: 90%;
height: 600px;
margin: 0 auto;
background-color: #f00;
}
</style>
</head>
<body>
<!-- 布局方式 -->
<!-- 1.静态布局:写多大就固定多大 -->
<!-- 2.流式布局:大小改变,位置不变 -->
<!-- 3.自适应布局:大小不变,位置改变 -->
<!-- 4.响应式布局: -->
<!-- 移动设备 375 960 -->
<!-- <div class="box"></div> -->
<!-- 版心 -->
<div class="w1200"></div>
</body>
</html>
rem
<!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>
html {
font-size: 10px;
}
.father {
width: 400px;
height: 400px;
border: 1px solid black;
font-size: 20px;
}
.son {
/* width: 10em;
height: 10em; */
width: 10rem;
height: 10rem;
background-color: red;
}
</style>
</head>
<body>
<!-- px 像素单位 -->
<!-- em 相对单位,相对于父元素的字体大小的倍数 -->
<!-- rem 相对单位,root 根元素的字体大小 -->
<div class="father">
<div class="son"></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>
<style>
/* 结合媒体查询,做移动端适配 */
/* iphone 6/7/8 375px */
@media screen and (min-width:375px) {
html {
font-size: 10px;
}
}
/* iphone *6/7/8 plus */
@media screen and (min-width:414px) {
html {
font-size: 11.04px;
}
}
/* iphone 14 pro max 430px */
@media screen and (min-width:430px) {
html {
font-size: 11.47px;
}
}
.box {
width: 20rem;
height: 20rem;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>