Skip to content

Commit 55282cb

Browse files
author
zhuxun.jb
committed
1.0rc1
1 parent 1aa8f85 commit 55282cb

File tree

6 files changed

+835
-3
lines changed

6 files changed

+835
-3
lines changed

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2014 AlibabaMobileFrontEnd
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

Lines changed: 91 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,92 @@
1-
lib.flexible
2-
============
1+
# 可伸缩布局方案
32

4-
可伸缩布局方案
3+
## 最新版本
4+
5+
**1.0rc1**
6+
7+
## 依赖
8+
9+
无
10+
11+
## 原理
12+
13+
在页面加载之初，判断当前系统以及其`device pixel ratio`，把文档宽度除以16作为文档的字体大小。在之后的样式中通过`rem`单位来实现元素的尺寸等设置，以便确保元素是可伸缩且自适应的。并且配合meta的scale缩放，来达到高清适配的目的。
14+
15+
## 栅格使用方法
16+
17+
如选择grid三栏布局，一栏跨4列，则由3个col-4组成
18+
19+
<!-- .col-*的父节点要为.grid* -->
20+
<div class="grid">
21+
<div class="col-4"></div>
22+
<div class="col-4"></div>
23+
<div class="col-4"></div>
24+
</div>
25+
26+
如选择grid-thin两栏布局，一栏跨6列，则由2个col-6组成
27+
28+
<div class="grid-thin">
29+
<div class="col-6"></div>
30+
<div class="col-6"></div>
31+
</div>
32+
33+
如选择grid-fat四栏布局，一栏跨3列，则由4个col-3组成
34+
35+
<div class="grid-fat">
36+
<div class="col-3"></div>
37+
<div class="col-3"></div>
38+
<div class="col-3"></div>
39+
<div class="col-3"></div>
40+
</div>
41+
42+
43+
## 单位rem使用方法
44+
45+
对于320宽度来设计的视觉稿，只需要把视觉稿上的尺寸除以20，即可得出rem单位的数值。如果是以640宽度来设计的视觉稿，则除以40即可，依次类推。
46+
47+
<div class="grid-fat">
48+
<div class="col-6"><div class="list">列表</div></div>
49+
<div class="col-6"><div class="info">信息</div></div>
50+
</div>
51+
<style>
52+
.list {
53+
padding-left: 0.2rem
54+
}
55+
.info {
56+
padding-right: 0.2rem;
57+
}
58+
</style>
59+
60+
## 字体不使用rem的方法
61+
62+
在document上会有一个属性`data-dpr`，值为当前网页的dpr实际值，包括1和2，未来可能有1.5和3。
63+
64+
字体的大小不能用rem作为单位，仍旧采用px为单位。所以对于字体的设置，需要用data-dpr属性来区分不同dpr的大小。例如：
65+
66+
div {
67+
width: 1rem;
68+
height: 0.4rem;
69+
font-size: 12px;
70+
}
71+
[data-dpr="1"] div {
72+
font-size: 12px;
73+
}
74+
[data-dpr="2"] div {
75+
font-size: 24px;
76+
}
77+
78+
## 如何在高清屏上展示1px的边框
79+
80+
一般边框或者分割线需要精确的以1px的视觉展示出来，普通的方案无法满足要求。在高清方案下，所有的1px线都能完美重现视觉稿。
81+
82+
div {
83+
border: 1px solid #ECECEC;
84+
width: 8rem;
85+
height: 5rem;
86+
border-radius: 0.2rem;
87+
}
88+
89+
## 常见问题
90+
91+
* 目前安卓机器的scale缩放存在兼容性问题，所以安卓机器都以标清的方案输出。
92+
* 如遇到加载时页面从大到小等闪烁时，可能需要在页面中内敛代码。

0 commit comments

Comments
 (0)