html 手机端像素大小不变形,前端移动端开发rem适配不同的手机分辨率

手机前端开发rem转换|前端开发用px和rem的区别|

在移动端可以做到适配不同的手机分辨率，如果保持整体缩放，没有设计上的差异可以不需要用到media query

假设设计师的视觉稿是按照iPhone6的宽度来设计的，即375px (如果是高清的视觉稿750/2=375)

那么，我们可以完全按照视觉稿上的尺寸来赋值给元素的样式，比如视觉稿上的尺寸是80px，那么在

当所有的网站所有的页面样式都设置好之后。

我们需要做两件事情：

设置页面的rem大小

font-size:calc(100vw/3.75);

}

100vw是设备的宽度，除以3.75可以让1rem的大小在iPhone6下等于100px

替换页面中的单位，把所有的px单位替换成rem，除以100，比如前面的80px，就是0.8rem

这样在iPhone6下，所有元素的尺寸还是和视觉稿的尺寸一样，而iphone5中，因为设备的宽度变小了，100vw/3.75得到的值，会相应的变小，即rem的单位值会变小，页面中所有的尺寸会等比例缩放。

这样就可以做到针对任何分辨率的设备保持视觉一致了。

最后，前面用到vw单位，但是低版本的设备可能不支持，那么就需要

document.documentElement.style.fontSize=window.innerWidth/3.75+’px’

之所以前面让1rem等于100px，而不是1rem等于1px，是因为在chrome下针对中文的最小字体是12px。

当然，这种步骤是针对现在的状况改rem来做的，如果一开始就是使用rem，那么写px2rem的函数，直接改这个函数就可以了。

移动前端开发技术架构|app前端开发中rem|前端移动端开发rem