css px2rem |图片晃动css代码

但是，rem并不是所有浏览器都支持，为了兼容性，大家需要使用px作为备用单位。那么怎么才能既保证使用px作为备用单位，同时又能在不同屏幕尺寸下呈现相同的大小呢？这就需要用到一种工具：px2rem。

html {
font-size: 62.5%;
}
body {
font-size: 1.4rem;
}
p {
font-size: 1.6rem;
padding: 20px;
}
@media screen and (max-width: 480px) {
html {
font-size: 50%;
}
}

在上述代码中，大家将根元素HTML的字号大小设置为10px（即62.5% * 16px），也就是说，对于1rem等于10px。然后，大家将body和p元素的字号大小设置为相应的rem值。这样就可以在不同屏幕尺寸下呈现相同的大小了。

当然，大家也可以使用一些工具来简化这一过程，比如postcss-pxtorem插件，可以自动将CSS代码中的px单位转换为rem，从而让开发者更加方便地使用rem单位。

总的来说，px2rem是解决响应式设计中单位大小问题的一种好方式，可以让开发者轻松实现不同屏幕尺寸下的适配，并提高用户体验。