rem 自适应--的两种方式:
rem : font size of root element (根元素的字体大小)
em : font size of element (父元素的字体大小)
1. 基于css 即媒体查询的来进行屏幕自适应
基与移动端的标准尺寸 640px,各种常见的屏幕尺寸下字体大小
| 宽度 | 320px | 384px | 480px | 640px |
| 屏幕对比比例 | 0.5 | 0.6 | 0.75 | 1 |
| html font size | 10px | 12px | 15px | 20px |
| 元素宽度(px) | 100px | 120px | 150px | 200px |
| 元素宽度(rem) | 10rem | 12rem | 15rem | 20rem |
@media only screen and (min-device-width:320px) {
html {
font-size: 10px;
}
}
2. 基于js
$(window).on(‘resize‘, function(){ var width = $(‘html‘).width(); var fontSize = width/640 *100; $(‘html‘).css(‘font-size‘, fontSize); }).trigger(‘resize‘)
原文：https://www.cnblogs.com/noraZhang/p/10127543.html