前端页面根据设计图设计rem比例

一、pc端和移动端网站的区别？

PC端：屏幕尺寸大,显示内容多,结构复杂,缩小浏览器窗口,页面内容结构并不会发生改变,也并不是响应式。

移动端：屏幕尺寸小,显示的内容有限,结构清晰,简洁,设备类型(ipad,iphone5,6,安卓等)繁多,页面内容结构自适应变化,随着浏览器窗口缩小而缩小,放大而放大,等比例缩放

相同点： 利用html和css+javascript,pc端性能优化同样适用于移动端策略
为什么要使用rem？
pc端的pc单位的相对固定的，字号大小直接被定死，所以用户无法根据自己设置的浏览器字号而缩放，em和rem虽然都是相对单位，但em是相对于它的父元素的font-size，页面层级越深，em的换算就越复杂，而rem是直接相对于根元素，这就避开了很多层级关系。移动端新型浏览器对rem的兼容很好，可以放心使用。
rem的换算？
function rem(){
document.documentElement.style.fontSize=document.documentElement.clientWidth/7.5+‘px’
}
这是最简单的rem适配，如果给的设计图的宽度是640时：
function rem(){
document.documentElement.style.fontSize=document.documentElement.clientWidth/6.4+‘px’
}
换算的依据
// 乘以100，px : rem = 100 : 1
var recalc = function() {
var width = docEl.clientWidth;
if (width / dpr > 750) {
width = 750 * dpr;
}
// 乘以100，px : rem = 100 : 1
docEl.style.fontSize = 100 * (width / 750) + ‘px’;
};