search

Tencent / weui

A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.
https://weui.io
Other
27.18k stars 6.41k forks source link

rem适配方案下weui下的组件样式变形 #881

Open kusofte-chap opened 3 years ago

kusofte-chap commented 3 years ago

H5项目中，使用动态设置html的font-size,在通过rem做单位适配页面布局，但是该方案会影响WeUI组件样式，请问有什么解决方案嘛？

uxsi commented 3 years ago

@kusofte-chap 请问是怎么影响到的呢？方便提供下截图吗？

kusofte-chap commented 3 years ago

1、设计稿按750设计的 2、在项目里使用rem适配方案具体代码如下： const html = document.getElementsByTagName("html")[0]; const resize = () => { html.style.fontSize = Math.min(Math.max(document.body.clientWidth, 320) / 7.5, 100) + "px"; }; window.addEventListener("resize", resize, false); resize();

加入上述代码之后页面里引用的weui组件样式会受到影响无法适配移动端，截图： weui问题截图

kusofte-chap commented 3 years ago

@kusofte-chap 请问是怎么影响到的呢？方便提供下截图吗？

![Uploading weui问题截图.jpeg…]()