响应式网站的实现过程及rem的动态计算

关于设计稿，rem的计算以及响应式网站的开发思路与流程

关于px，rem，vw

具体的概念就不说了，主要是rem的优势在于使用rem为元素设定字体大小时，相对大小对比的是HTML根元素。所以只修改根元素就能成比例地调整所有大小，并且能保证在不同宽度和尺寸的设备中能在维持布局不变的情况下对所有元素成比例缩放。

因此，即使设计师给的设计稿是按照px为单位设计的，但是前端需要经过转换，在CSS中使用rem单位。

响应式网站的实现思路

响应式网站及根据不同的设备自适应响应的布局，主体可以分为两类：

1. web端与移动端的不同，即针对这类不同终端设备最好需要两份设计稿，根据web端与移动端重写两份CSS样式布局。
2. 在每一类终端上，也需要根据屏幕的不同进行大小适配，这一部分，主要利用上面所说的rem来实现。

开发流程

使用rem实现自适应

首先，在网页代码(index.html)的head中，加入一行viewport元标签。

<meta name=”viewport” content=”width=device-width, initial-scale=1″ />

其中：

1. width=device-width 把布局视口设置成为浏览器（屏幕）的宽度。
2. initial-scale=1 的意思是初始缩放的比例是1，使用它的时候，同时也会将布局视口的尺寸设置为缩放后的尺寸。而缩放的尺寸就是基于屏幕的宽度来的，也就起到了和width=device-width同样的效果。
3. viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

在js中应用

document.documentElement.style.fontSize = document.documentElement.clientWidth / 1920*100 + 'px';

• 1920是所给的设计稿宽度，代表1920px。
• clientWidth为浏览器实际宽度。

这里的设计稿是1920px，若有一元素在设计稿上的宽度为100px,实际设备物理宽度为960px，即刚好为设计稿的一半，所以这时该元素在设备上的实际宽度100*（960/1920）=50px，也就是需要设计其宽度为100rem。

而一般浏览器会设置最小字体（例如chrome的最小字体为12px）,如果html的font-size为上述的960/1920,相当于为0.5px,会造成一些错误。所以,一般会将计算后的结果乘100,即在CSS中，只需对照着设计稿，将单位为px的元素除100，即可转换成rem格式.

利用media实现web端与移动端的布局自动响应

对于网站的响应式实现，可以使用bootstrap或其他的库和模板，但最简单最直观的应该还是CSS3