前端如何利用js与rem实现响应式布局

1、rem这个单位是根据根元素body和html设置的初始值font-size的大小改变的，比如初始设置body的font-size=100px，那么1rem=100px。如果font-size=200，那么1rem=200px,根据这个特性我们可以动态改变body的font-size值，不同屏幕计算出相应的font-size

1、新建html文件命名project1，新建js文件命名common。

2、获取不同设备的尺寸大小，计算出相应的font-size,首先我们自己定一个基准，电脑最大像素为基本上宽都是1920，所以这里定义基准宽度maxSize=1920,基准大小baseFontSize=100,(这个可以自己定义，为了方便计算这里写100)。如果在电脑像素为960，那font-size便是50，所以相应公式便是：

所求fontSize=设备宽度(deviceW)/maxSize*baseFontSize。得出fontSize值,后设置跟元素的font-size大小

3、这时候我们已经把js计算部分完成，接下来，便是引入到相应html文件中。这里要注意一点，我们是以1920为基准的，假设我们的设计稿是960 的宽度的（这个宽度可以打开ps查看）那么应该按1:2，也就是如果在设计稿中一个宽度为100px的那么应该设置为2rem

1、一般选择基准宽度和基准fontSize大小为了方便计算，都是结合设计稿，尽量选择整数。比如设计稿版心一般是1200,可以设置基准宽度为1200，基准fontsize为100px，这样我们根据设计稿来转换rem的时候就不用做过多的计算，100px就是等于1rem，比如一个24px的字体就是0.24rem,这样算起来非常的方便