前端响应式单位rem 转换的使用！

yydszcsyyds

已于 2024-11-01 09:37:17 修改

阅读量318

点赞数 4

CC 4.0 BY-SA版权

文章标签：前端

于 2024-10-29 16:35:29 首次发布

本文链接：https://blog.youkuaiyun.com/yydszcsyyds/article/details/143333487

rem css的尺寸单位  ，那个坑爹的说设置65.5%我也信了白学（不能用）

为什么用rem呢，因为px这个单位太绝对了，你写的只不过适配你中间电脑，

别人电脑看到会不一样，

这个不难有技巧保证看完发现和px 没区别呀

先说结果

第零步：在1000像素下写这个页面会非常的好写

1rem = 100px

不是所有元素都需要rem 可以设置弹性盒子让元素掉下去不要设置父级的宽高，li 里面的元素会撑开盒子下面的也会自己适应的掉下去不要设置绝对元素就好！！！！！

第一步 <head> </head> 标签写

        <meta name="HandheldFriendly" content="true">

第二步：css设置

html { font-size: 100px;} 根据设备自己算一下

注意在实际写的时候每个字体都需要给上大小

第三步：js 设置

function init () {


    // 获取屏幕宽度
    let width = document.documentElement.clientWidth
    // 设置根元素字体大小。此时为宽的10等分
    document.documentElement.style.fontSize = width / 10 + 'px'
    console.log(width/10)
}

init()
// 监听手机旋转的事件的时机，重新设置
window.addEventListener('orientationchange', init)
// 监听手机窗口变化，重新设置
window.addEventListener('resize', init)；

第四步：一键转换

px 单位用习惯怎么办呢？实际写css rem 计算的太烧脑怎么办

那太好办了有多种解决办法

1.网页在线转换

2.插件

实际写还是 px 最后一键转换即可

这样你在搭积木的时候单位改一下和之前还是一样的效果

现在想写一个长200宽200的px方框只需要这样写即可

注释：1rem=100px ,1rem=100px,1rem=100px,1rem=100px