媒体查询
- @media：媒体查询；可以针对不同的媒体类型定义不同的样式
- only：指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器
- screen：用于电脑屏幕，平板电脑，智能手机等
- and前后一定要有空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<link rel="stylesheet" href="../css/reset.css">
<style type="text/css">
.box{
width: 100px; height: 100px;
background: red; margin: 100px auto;
}
/* 800及800以上时元素的样式 */
/* @media only screen and (min-width: 800px){
.box{
background: green;
}
} */
/* 800及800以下时元素的样式 */
/* @media only screen and (max-width: 800px){
.box{
background: green;
}
} */
/* 600到900之间的样式 */
@media only screen and (min-width: 600px) and (max-width: 900px){
.box{
background: green;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
布局视口
- viewport：视口；在css标准文档中称为初始包含块
- PC端指的是浏览器的可视区域
- 移动端指的就是viewport中的布局视口
布局视口
- 桌面上，视口与浏览器窗口的宽度一致，但在手机上，视口与移动端浏览器屏幕宽度是不关联的
- 通常移动端的布局视口默认被设置成了980px
- 如果网站没有为移动端优化，那么浏览器会尽可能的缩小网页，让用户能看到网页的全貌
视觉视口
- 用户正在看到的网页的区域，注意是网页的区域
- 如果用户缩小网页，我们看到的网页区域将变大，此时视觉视口也变大
- 同理，用户放大网页，我们能看到的网页区域将缩小，此时视觉视口也变小
- 不管用户如果缩放，都不会影响到布局视口的宽度
理想视口
- 理想视口指的是设备浏览器的显示区域
- 移动端布局视口的宽度应该与理想视口宽度一致
<!-- 只对移动端有效，PC端无效 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
三种像素
CSS像素
- 可以理解为“直觉”像素，CSS和JS使用的抽象单位
- 浏览器内的一切长度都是以CSS像素为单位的，CSS像素的单位是px
逻辑像素
- 逻辑像素又被称为设备独立像素，比如iPhone6的逻辑像素是375x667
物理像素
- 物理像素又被称为设备像素，设备屏幕实际拥有的像素点，比如iPhone6的物理像素是750x1334
设备像素比
-
指的是设备以多少物理像素来显示一个CSS像素
-
DPR = 设备像素 / 逻辑像素
-
在移动端，一般使用iPhone6的屏幕尺寸进行设计，设计图宽度750px
vw和vh单位
相对于视口的宽度和高度，和父元素无关
- vw：1vw等于视口宽度的1%
- vh：1vh等于视口高度的1%
- vw并不是只用来设置宽度，vh并不是只用来设置高度
- vw和vh就是一种尺寸单位
- vw单位用得多，vh单位基本用不到
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<link rel="stylesheet" href="../css/reset.css">
<style type="text/css">
html, body{
width: 100%; height: 100%;
}
div{
width: 50vw; height: 50vh;
background: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
vmin和vmax单位
- vmin：选取vw和vh中最小的那个
- vmax：选取vw和vh中最大的那个