使用rem自适应的原因
市面上手机的种类有三百多种 ,媒体查询这种方式 只能是范围性查找,
使用原生js函数封装的方式 ,自适应
代码实现:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7f47528e6b2bca2393cf35502c1e9228.png)
第一步: 使用window 的事件监听方法 resize 事件
第二步: 函数体内部 声明变量 赋值 检测 window .innerWidth
第三步: 需要修改元素地方属性 ,就需要使用document.documentElement 算中标签元素 ,修改style里面的Font.size
注意: 上面选中元素 赋值的操作 是一个手机屏幕型号的适配 width/375+‘px’
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6552e46211039479073844c7bb334f37.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b3534f50be320568d13db8109410f912.png)
这里乘以100 是PX在页面显示的太小