使用vux-ui怎么做移动端适配

学生党,移动端新人入门。这几天在看移动端适配的问题,通过谷歌的情况发现讨论的比较多的方案就是淘宝现在用的适配方案:

1、 JavaScript动态计算设置scale,包括initial-scale,maximum-scale,minimum-scale
2、动态设置html的font-size,为屏幕分辨率/10
3、使用rem作为单位,css尺寸为:设计稿标注尺寸/html的font-size
4、font-size不使用rem作为单位。

我发现vux、mint 这些框架在适配这方面只是简单的固定下高度,宽度自适应。虽然看官方demo好像也还不错,但是我觉得如果页面复杂点的话这种简单的方法就不够看了。如果我使用vux,采用淘宝的适配方案的话,我就要去改vux的源码css样式,应该也很麻烦。

所以在这里问下各位有什么建议。(如果你在项目中使用过vux、mint,能大概说下适配方案吗)

阅读 10.6k
3 个回答

如果去改vux的css源码,那是最不科学的做法了,还不如自己写。
如果要求不高的话,自己写的样式可以使用rem,用到vux的组件,那就只能用它的css了。
如果他的组件简单点,可以重写样式覆盖也行。
如果对适配要求很高,那它固定的px肯定满足不了你的rem,所以只能自己干了。

我们线上的项目现在也就只用了这些,用起来毫无违和感。以前用css3缩放的,有时候会闪一下,而且啥都要计算,感觉不太好。用rem什么的做还得计算麻烦。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!--允许全屏-->
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="yes" name="apple-touch-fullscreen" />
    <meta name="data-spm" content="a215s" />
    <meta content="telephone=no,email=no" name="format-detection" />
    <meta content="fullscreen=yes,preventMove=no" name="ML-Config" />
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>test</title>
</head>

淘宝的方案确实不太适合这类的框架使用,因为采用的缩放整体大小,然而框架都是固定的PX,就导致组件变得很小,有点麻烦。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题