响应式布局之尺寸单位rem使用

web实际开发过程中,特别是移动端的页面，会遇到元素尺寸及字体在不同分辨率设备上表现差异较大，甚至严重影响用户体验；

我现在的做法是使用rem作为尺寸单位，来实现页面内元素尺寸及字体在不同宽度设备下自由缩放尺寸，从而解决小屏幕上显示牛大字的尴尬情况；

1. 设置html的字体为100px;

2.页面内需要用到尺寸的地方都使用rem作为尺寸单位；（这样在改变html字体大小的时候页面内的其他元素也都会随之按比率发生变化；

ps: 如图上这样设置尺寸，然后当html的font-size变为50px的时候，那页面中设置的所有rem单位的尺寸都随之减少到一半；

3.那么问题来了，怎么才能让HTML的font-size发生变化呢？

两个办法：a. 使用css媒体查询，当页面宽度为某个条件时改变html的font-size;

b. 使用JS判断页面的宽度，动态调整html的font-size;

 

这样就可以实现页面宽度不同，但是看起来比例、效果还是一样的。

另外一种简单粗暴的方法: https://blog.csdn.net/byc233518/article/details/104343085