针对移动端的响应式，对设计途种的框体大小，字体大小，间距大小的规范

针对移动端的响应式，对设计途种的框体大小，字体大小，间距大小的规范

设计图以iphone6的标准给：比例值 = 7.5

统一使用 vw，高度转换成vw，而不用vh。

 

1. 框体大小

设计图如图

按钮的 width：80px;height：30px;

计算公式：（width计算后的宽度；w实际宽度）

width = w/7.5   height  =  width/(w/H) = width*H/w 注意：除不尽的保留2位小数（四舍五入）

 

那么这个button在css样式中的应该如下：button : {

width:80/7.5 = 10.67vw;

height :calc( 10.67vw*30/80 =4 )

 }

最终结果：

button : {

width : 10.67vw;

height : calc( 10.67vw*30/80 )

 }

cala()括号中前后要有空格

2、边距 padding  margin

利用margin来举例

公式：margin-top：15/7.5 = 2vw

margin-right:40/7.5 = 5.33vw(除不尽的一样保留两位小数，四舍五入)

padding同样

 

 

3、字体

针对设计图的字体，设备有最小字体限制，但目前设计图应给的字体最小为24px。

针对24px的字体 font-size：24/7.5 = 3.2vw

针对48px的字体 font-size ： 48/7.5 = 6.4vw

 

附加：

1、这样在用flex排版的时候。尤其是纵向的排版，要给子元素添加属性{flex-grow:1;flex-shink:1}

横向排版应该没有很大的影响的

2、整体布局样式不建议使用框架的布局，针对想使用的组件，可以单独引入。

3、整屏显示的图片，高度自适应，宽度裁剪。

4.对于文本溢出的情况，要设置最小高度或者宽度，同样适用vw为单位。