前端适配问题

最新推荐文章于 2025-05-07 17:23:17 发布

一路向阳~负责的男人

最新推荐文章于 2025-05-07 17:23:17 发布

阅读量2.7k

点赞数

文章标签： css3 前端 css

本文链接：https://blog.youkuaiyun.com/weixin_43416349/article/details/121199839

版权

前端适配有两种适配方法：

响应式假如一个页面分三部分，页面缩小时，内容等比例缩小
自适应式假如一个页面分三部分，页面缩小时，只显示两部分，再缩小就显示一部

什么是 dpr ：

DPR（Device Pixel Ratio）设备像素比
DPR = 物理像素 / 设备独立像素
物理像素 = 手机的分辨率
设备独立像素 = 设备屏幕的大小（开发者工具调试里） = css的px
总之：一个手机屏幕有很多个显示点（像素点），如果Dpr = 2 ，就是 1 PX 由 2个像素点显示。

适配移动端 ( font-size，布局大小），可以用三种方法:

第一种：@media(max-width:540px){ html { font-size:84.375px; } } /*Android常用宽度*/
@media(max-width:480px){ html { font-size:75px; } } /*Android常用宽度*/

第二种：单位用rem

第三种：单位用vw，vh，现在普遍用这种方法。

移动端1px如何适配：

用：：after伪类+tramsform：scale（0.5）
用 viewport + rem （底层是@media（）{ } 实现）

.border-1px {
    width: 100px;
    height: 100px;
    position: relative;
}
<!--全部边框-->
.border-1px:after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    border: 1px solid #000;
    border-radius: 4px;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: top left;
}

参考：吃透移动端 1px｜从基本原理到开源解决方案 - 知乎

参考：移动端开发的屏幕、图像、字体与布局的兼容适配_前端开发博客-优快云博客

参考：移动端 1px 解决方案(完整版)_爱码士的博客-优快云博客_移动端1px