双模响应式网站的单位设置说明

一、单位说明

1,目前响应式的单位有四种:px,%,rem,em。

① Px:像素 (计算机屏幕上的一个点),绝对长度;

② %:百分比;

③ Rem:相对单位,相对于根元素html;

④ Em:相对单位,相对于其所在的父元素,在没有css规则情况下,

1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm;

em单位,当设置了font-size属性后,它会逐级向上相乘,所以如果一个设置了font-size:1.1em的元素在另一个设置了font-size:1.1em的元素里,而这个元素又在另一个设置了font-size:1.1em的元素里,那么最后计算的结果是1.1X1.1X1.1=1.331rem(根em)。


2,注意事项:

① 先换单位,后改数值;

② 先用外容器设置内边距来统一改边距值,个性设计可单个控件调整;

③ 大间距建议%,小间距建议rem,px。


二、公用单位

公用单位包含:文字大小,行高,左边距,右边距,icon大小,外边距,内边距

1,文字大小:建议rem

2,左边距/右边距:建议优先rem

3,Icon大小:建议rem

4,外边距:建议左右%,建议上下rem

5,内边距:建议%

6,行高:建议%,120~150%


三、控件单位

1,组件

外边距:上和下;

内边距:左边距和右边距用的多,一般是用于页面的布局,用%。


2,导航

导航间距大的话建议开启栏目等宽,间距小的话建议关闭栏目等宽,设置列间距

单位:rem/em;

上下内间距:建议rem;

左右内间距:建议em。


3,按钮

最大宽度:建议rem;

上下内边距:建议 px ;

左右内间距:小间距 建议 rem;大间距建议%。


4,表单/列表

行间距/列间距:建议rem;

内间距:建议px/rem。


5,多语言,社

上下内边距:rem;

左右内边距:rem;

列间距:%,rem。


6,搜索

文本框:内边距:px;

             外边距:rem;

按钮:同按钮控件即可。


当前位置:帮助中心>常见问题
    更新时间:2020/06/16

    相关推荐