|
(function(){functionchange(){varfs=document.documentElement.clientWidth/320*20;document.documentElement.style.fontSize=fs+'px';}window.addEventListener('resize',change,false);change();})();/*这是我之前写一个练习写的调字体的函数，rem估计都差不多这样调整吧，下面具体说先设定：以320px屏幕宽度下1rem=20px为基准（为啥这么定在后面说）varfs=document.documentElement.clientWidth/320*20;首先是弄清楚rem是什么，ｒｅｍ也就是根元素（html）的字号，你设置根元素的fontsize是多少像素1rem的值就是代表多少像素然后是为什么要这样算字号呢？假如现在的实际屏幕宽度是640px，屏幕宽度比上基准宽度（320），结果是基准的2倍，那么1rem代表的值也应该是基准的两倍，屏幕宽/３２０* ２０ｐｘ这样就能算出不同屏幕宽时１ｒｅｍ应该代表多少像素，然后好说了，那么我写样式的时候只需要写固定的ｒｅｍ值就行了，虽然写的ｒｅｍ值是固定的，但是他代表的像素会随着屏幕尺寸变化而变化再然后就是样式里该怎么算到底写多少rem呢？还是打个比方，假设你的设计图也正好是３２０宽度，那就好算了，你直接用ｐｓ量，量出一个ｄｉｖ的宽度是２０像素，那么样式里就要写20/20rem就是１ｒｅｍ量出它的margin是10像素，那么样式里就写10/20rem,也就是0.5rem不用考虑什么百分比，只要用了rem那么整个页面最好全都用rem，写完你会发现不管屏幕尺寸怎么变，各个元素和页面的大小比例都是固定的，所占的位置比例也是固定的如果设计图不是320（你自己定的基准宽）怎么办？那就先算出设计图和你自己定的基准宽度的比例，为了好算还是假定基准宽是320，设计图实际宽度是640px那么算出比例是640/320=2;再算样式里的rem值就应该把ps量出来的宽度先除以这个比例再去除基准的20像素现在再去ps里测量，这时候如果又量出一个ｄｉｖ的宽度是２０像素，那么样式里就要写（20/2)/20rem就是0.5ｒｅｍ量出它的margin是10像素，那么样式里就写(10/2)/20rem,也就是0.25rem最后一点基准宽度和基准的1rem=多少像素怎么定呢？一般来说比较好的是按找你设计图的一半定基准屏幕宽度，比如设计图640就定基准宽320基准像素按里来说1rem=10px不是更好算吗？不过部分浏览器最低只支持12px的字体设置，所以最好设置大于12号的字体，怎么好算怎么定。还有就是最好配合sass/less使用，提前把量出来的像素需要除去多少定个变量，写样式的时候直接就可以写量出来的实际像素/变量了还是一切条件还是按上面的例子的话，320的设计图的情况，可以定个变量$scale=20rem;（640的图就是$scale=(640/320)*20rem)然后你ps里量出是40像素就写div{width:40/$scale;}就可以了（rem写在变量那里是因为sass和less计算可以带单位，这样在写样式的时候就不用老写rem了,很方便）废话有点多也不知道哪写错没，发现问题告诉我下~*/ |
天盟APP下载
