本文主要是介绍针对移动端的响应式，对设计途种的框体大小，字体大小，间距大小的规范，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
针对移动端的响应式，对设计途种的框体大小，字体大小，间距大小的规范
设计图以iphone6的标准给：比例值 = 7.5
统一使用 vw，高度转换成vw，而不用vh。
- 框体大小
设计图如图
按钮的 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为单位。
这篇关于针对移动端的响应式，对设计途种的框体大小，字体大小，间距大小的规范的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
