qyl_anikin

webapp中的单位

rem:  是相对更节点字体来计算的,1rem = 1rootSize;
vh:是根据可视窗口计算的,1vh = 1%viewPoint;
rem 是相对根元素设置的字体大小来的。vw是相对屏幕的宽度来的,根元素设置的字体大小可以手动设置,屏幕的宽度是固定的。

vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%

font-size: 1.5625vw;是怎么回事呢?
这个1.5625 = (10/640)*100 ,这个10是怎么来的呢. 

为了开发方便大家都喜欢把根字体设为10px,因为这样的话1rem就等于10px
而我们在量设计图时得到的单位是px,所以我们在转成rem时直接除以10就可以,计算非常方便。

这个640是一般的设计图都是640px宽的,这个值可以根据设计图的实际大小来调整。则1vw = 6.4px;
1.5626*6.4 = 10px;
1px = 0.15625vw;

为什么要乘以100呢,因为要换算到vm的单位

练习:1:640px的设计图,根节点字体是10px, 某个图像的大小是32px,则计算转化为rem跟vh的值:
                答: rootSize = 10px; 1rem = 10px; 则1px = 0.1rem; 因此:32px = 3.2rem;
                        又:1vh=6.4px; 则 32px = 5vw;
上一篇 下一篇
评论
©qyl_anikin | Powered by LOFTER