前端如何解决pc端屏幕显示设置缩放比例对页面布局的影响？

最新推荐文章于 2024-08-14 19:32:44 发布

锐视创想

最新推荐文章于 2024-08-14 19:32:44 发布

阅读量1.7w

点赞数 15

分类专栏：前端文章标签： html5 html javascript

本文链接：https://blog.csdn.net/mehnr/article/details/109184936

版权

笔记本电脑的屏幕缩放设置为125%时，会对前端页面布局造成影响，导致高分屏和普分屏显示不一致。解决办法是在媒体适配中利用`device-pixel-ratio`和`root-font-size`实现动态缩放，通过添加兼容性代码来预防用户误触网页缩放问题。

摘要由CSDN通过智能技术生成

现在很多笔记本电脑都推荐将缩放设置为125%，等比例放大显示。(垃圾Windows

这对我们前端的页面的布局会产生一些影响

首先，单独的响应式布局hold不住这个问题，因为出问题的是device-pixel-ratio。
问题现象是高分屏下整好的东西，在普分屏下会放大；而普分屏下整好的东西，在高分屏上会缩小。
重现这个问题不需要高分屏，直接用Ctrl++或者Ctrl+-出来的效果是跟高分屏一致的（所以搞定这个问题之后，也可以同时预防用户误触网页缩放）。另外恢复是Ctrl+Num0
解决的关键就是你得在媒体适配里写device-pixel-ratio单独适配像素比；另外，需要把绝大多数组件由px单位转换为rem单位，因为需要在前边提到的device-pixel-ratio里调节:root的font-size`，以达到动态缩放的目的
（加上兼容）写好以后的代码类似：

@media all
and (-moz-min-device-pixel-ratio: 1.09) and (-moz-max-device-pixel-ratio: 1.18),
    (-webkit-min-device-pixel-ratio: 1.09) and (-webkit-max-device-pixel-ratio: 1.18),
    (min-resolution: 1.09dppx) and (max-resolution: 1.18dppx) {
   
    :root {
   
        font-size