自适应页面布局的问题

Question

这两天一直被困惑着，话不多说先上我做的图的链接：这里是链接，这是一个很简单的自适应布局！接下来是困扰我两天的问题：rem不是定义字体大小的吗？为什么能够用来做padding这些的单位？代表了什么？根据PSD怎么看出来是多少rem；根据PSD文件，右上角关闭距离边框为3%，为什么我设置3%完全不够，必须要跟他一样设置到20%才行，这里的20%难道不是根据首行来算的吗？求大神解答！处女座快把自己逼疯了

Answer 1

1、rem是一个相对单位，相对的是html上的字体大小，我看你例子里html上font-size是62.5%，62.5%*16px=10px，所以你的例子里所有rem是相对10px这个数值的;1rem=10px,2rem=20px；

2、设置百分比，百分比是根据父元素的数值，例子里<span>关闭</span>top:20%，是根据父元素<div class="header">的height来设置的;

psd的相对和css的相对不相同，所以先搞清楚相对谁，再去psd进行测算；

Answer 2

(function(){
  function change() {
    var fs = document.documentElement.clientWidth/320*20;
    document.documentElement.style.fontSize = fs + 'px';
  }
  window.addEventListener('resize', change, false);
  change();
})();

/*
这是我之前写一个练习写的调字体的函数，rem估计都差不多这样调整吧，下面具体说

先设定：以320px屏幕宽度下1rem=20px为基准 （为啥这么定在后面说）
    
var fs = 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了,很方便）

废话有点多也不知道哪写错没，发现问题告诉我下~
*/