CSS进阶之移动端适配 ：媒体查询、CSS常见单位、深入理解pixel、DPR、PPI、浏览器视口Viewport、移动端适配rem方案、移动端适配vw方案

在移动端适配中，我们通常使用媒体查询和相关CSS单位来实现响应式布局。以下是一些关键点和示例代码：

1. 媒体查询：

/* 针对不同屏幕宽度的样式 */
@media screen and (max-width: 320px) {
    body {
        background-color: blue;
    }
}
 
@media screen and (min-width: 321px) and (max-width: 768px) {
    body {
        background-color: green;
    }
}
 
@media screen and (min-width: 769px) {
    body {
        background-color: red;
    }
}

2. CSS单位：

   • px：像素，是固定单位，不适应不同的设备。
   • em：相对于父元素的字体大小，容易造成层级复杂度。
   • rem：相对于根元素的字体大小，是现代响应式布局的首选单位。
   • %：百分比，相对于父元素，适合宽度设置。
   • vw/vh：视口宽度/高度的百分比，适合宽度和高度设置。
   • vmin/vmax：视口宽度和高度中较小/较大的那个百分比，适合图片和背景。

3. 设备像素比(Device Pixel Ratio, DPR)：

   • CSS中可以用1px等同于1dp(设备像素)，在高分辨率设备上会出现问题。
   • 可以用window.devicePixelRatio获取DPR，进行适配。

4. 像素密度(Pixels Per Inch, PPI)：

   • 用于衡量屏幕的密度，可以通过window.screen.width / window.screen.height和屏幕物理尺寸结合使用。

5. 视口(Viewport)：

   • 为了使网站在移动端上正常显示，需要设置<meta name="viewport"标签。
   • 例如：<meta name="viewport" content="width=device-width, initial-scale=1.0">
6. 使用calc()函数结合媒体查询进行布局调整：

.container {
    width: calc(100% - 20px); /* 计算宽度 */
    font-size: 16px; /* 默认字体大小 */
}
 
@media screen and (min-width: 321px) {
    .container {
        width: calc(100% - 25px); /* 根据屏幕宽度调整 */
        font-size: 18px; /* 增加字体大小 */
    }
}
 
@media screen and (min-width: 769px) {
    .container {
        width: calc(100% - 30px); /* 更大屏幕宽度调整 */
        font-size: 20px; /* 进一步增加字体大小 */
    }
}

综上，移动端适配主要是通过媒体查询、CSS单位、设备像素比和视口管理来实现不同屏幕大小的适配。通过这些技术，开发者可以创建出在各种移动设备上都能保持良好用户体验的网页。