Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

如何让其它UI库兼容 lib-flexible 方案 #1

Open
millylee opened this issue Jan 25, 2016 · 0 comments
Open

如何让其它UI库兼容 lib-flexible 方案 #1

millylee opened this issue Jan 25, 2016 · 0 comments
Labels
随手记

Comments

@millylee
Copy link
Owner

如何使用

1.以 SUI Mobile 为例，把sm.css里面涉及到动态更改html font-size的代码删除，通过查找可以知道其使用的是媒体查询的方式。

html {
  font-size: 20px;
}
@media only screen and (min-width: 400px) {
  html {
    font-size: 21.33333333px !important;
  }
}
@media only screen and (min-width: 414px) {
  html {
    font-size: 22.08px !important;
  }
}
@media only screen and (min-width: 480px) {
  html {
    font-size: 25.6px !important;
  }
}

2.按 lib-flexbile 方案更改html，最终如下：

<head>
    <meta charset="utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no, email=no" />
    <title>标题</title>
    <script src="js/misc/flexible.min.js"></script>
</head>

3.然后从官方文档中可以知道 SUI Mobile 是基于 750px 的设计稿，结合 lib-flexible 方案设置了一个 scss 函数

@function rem($original-width) {
  @return ($original-width*40/75) + rem;
}

4.最后，我们只需将 sm.css 里面涉及到的classname: 2.1rem;替换成classname:rem(2.1);，这个交给 Sublime Text 就行。

5.抛砖引玉，可以类似修改其它库。

Sublime Text 批量替换单位

Ctrl+H选择正则匹配，匹配到带 rem 单位的正（负）整数、正（负）小数。

-?\d*?.?\d+rem
rem($1)

以上正则可以匹配到下列几种情况

1rem
-1rem
0.33rem
-0.33rem
0.2rem
.2rem
1.222rem
3434.2rem
10.23rem
-3333.2rem

不匹配

-rem  //icon-remove
rem() //sass @function
@millylee millylee changed the title SublimeText 批量替换单位 如何让其它UI库兼容 lib-flexible 方案 Jan 26, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
随手记
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@millylee