我们知道移动端设计图都是750像素，但是当设备屏幕在375像素的情况下，比如在设计稿中我们边框的宽度是1像素，然而在设备屏幕是375像素的情况下，我们应该将边框的宽度也要设置成0.5像素？
有人会想着说，那还用设置，它不自动换成0.5像素了吗？可是我们要知道在一些特别陈旧的手机设备，他是不能够认识0.5像素这个单位的，它的最低单位就是1px。我们处理这种情况的方式一般有两种：
第一种是阿里的解决方案：viewport+rem+div这个应用在淘宝的h5端，这个是修改我们的浏览器视口来操作，比较麻烦并不推荐使用。
第二种是京东的解决方案：伪类+transform。这个比较建议使用，它改变少量的内容就能将1像素的问题解决。具体实现如下图：
.border-test {
position:relative;
padding: 1opx;
margin: 20px;
display: inline-block;
}border-test::before {
content:
position: absolute;
left: 0;
top: 0;
width: 200%;
height: 200%;
border: 1px solid red;
transform-origin: 0 0;
transform: scale(0.5);
}这里就是京东在手机端网页实现的逻辑，大概就是说在小屏幕设备上设置一个before伪类（操作这个伪类从而不影响整体的布局），先将屏幕的宽高都放大一倍，然后使用transform属性再缩放一倍。
感谢大家观看
![[[微笑]]](https://www.xvzhu.cn/usr/themes/freewind/static/img/face/emotions/0.gif)
秋风于渭水 游客 2026-03-13 10:08 回复
这确实是一个盲点，这个还是很有必要的，处理不好会导致网页内的元素出现抖动问题。
abzzp 管理员 2026-03-21 10:13 回复
@秋风于渭水
确实
通常会采取哪些措施来确保网站或者应用在不同的浏览器上的兼容性? - 程序员鸡皮-前端程序员|PHP程序员|全栈程序员 游客 2026-03-15 23:08 回复
[...]不同的浏览器存在兼容性问题的核心原因是不同的浏览器可能使用的是不同的浏览器内核。在现代化开发中，大多数的浏览器兼容性问题是可以通过工程化中的配置选项来解决的。1.比如browserslist可以配置目标的浏览器或者Node环境，然后在不同的工具中起作用，比如autoprefixer/babel/postess preset env等，在进行了正确的配置后，开发的Vue或者React项目在进行打包时[...]