一、移动端适配
屏幕是由一个一个发光的小点构成，这一个一个的小点就是像素。我们所说的分辨率说的就是屏幕中小点的数量。在前端开发中，像素主要分为两个情况讨论：CSS像素 和 物理像素；上述我们所说的小点就属于 物理像素。在编写网页时，我们所用的像素都是 CSS像素。浏览器在显示网页时，需要将 CSS像素 转换为物理像素然后呈现。一个 CSS像素 最终由几个物理像素显示，由浏览器决定，默认情况下，在 PC端，一个 CSS像素 等于一个 物理像素。
视口（viewport）就是屏幕中用来显示网页的区域。我们可以通过查看视口的大小，来观察 CSS像素 和 物理像素 的比值。
在不同的屏幕，单位像素的大小是不同的，像素越小屏幕越清晰。智能手机的像素远远小于 PC端 的像素点。默认情况下，移动端的网页会将视口设置为一个固定的数值，即 980px（CSS像素），以确保 PC端 网页可以在移动端正常显示。 但是如果网页的宽度超过了这个数值，移动端的浏览器会自动会网页缩放以完整显示网页。所以基本大部分 PC端 网站都可以在移动端中正常浏览，但是往往不会有一个好的体验。为了解决这个问题，大部分网站都会专门为移动端设计网页。
移动端默认的视口大小是 980px（CSS像素）。默认情况下，移动端的像素比 就是 物理像素/CSS像素，即 移动端宽度/视口大小。如果我们直接在网页中编写移动端代码，在这样的视口下，像素比是非常不好的，会导致网页中的内容非常非常的小。因此，在编写移动端页面时，必须要确保有一个比较合理的像素比。我们可以通过 <meta> 标签来设置视口大小。每一款移动设备设计时，都会有一个最佳的像素比。一般，我们只需要将像素比设置为该值即可得到一个最佳效果。将像素比设置为最佳像素比的视口大小，我们称其为 完美视口。
<!DOCTYPE html>
<html>
<head>
<title>移动端适配</title>
<meta charset="UTF-8">
<!-- 设置视口大小 device-width表示设备的宽度（完美视口） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
在写移动端的页面时，一定要加上以下代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
二、vw适配
由于不同设备的视口和像素比不同，所以同样的像素大小在不同的设备下的意义也是不同的。所以，在移动端开发时，对网页不会能使用 px 来进行局部，应该使用 vw 来进行布局。vw 表示的视口宽度（viewport width）。vw 这个单位永远相对于视口宽度进行计算；
- 100vw = 1个视口宽度；
- 1vw = 1%视口宽度；
假设设计图的宽度为 750px，使用 vw 作为单位，即 100vw = 750px ==> 1px = 0.13333333333333333vw；假设创建一个大小为 48px * 35px 大小的 div。
<!DOCTYPE html>
<html>
<head>
<title>移动端适配</title>
<meta charset="UTF-8">
<!-- 设置视口大小 device-width表示设备的宽度（完美视口） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
margin: 0;
padding: 0;
}
html{
/*
0.13333333333333333vw = 1px
*/
font-size: 0.13333333333333333vw;
}
.box1{
/*
1rem = 1 html的字体大小
*/
width: 48rem;
height: 35rem;
background-color: #bfa;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
在有些旧版的浏览器中，网页中字体大小最小是 12px，不能设置一个比 12px 还要小的字体。如果我们设置了一个小于 12px 的字体，浏览器可能会将字体自动设置为 12px。此时，我们可以通过以下方式设置：
<!DOCTYPE html>
<html>
<head>
<title>移动端适配</title>
<meta charset="UTF-8">
<!-- 设置视口大小 device-width表示设备的宽度（完美视口） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
margin: 0;
padding: 0;
}
html{
/*
0.13333333333333333vw = 1px
6.66667vw = 50px
*/
font-size: 6.66667vw;
}
.box1{
/*
1rem = 1 html的字体大小
1rem = 50px（设计图）
*/
width: 0.96rem;
height: 0.7rem;
background-color: #bfa;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>