前端rem适配

    function setRem() {
        let designSize = 1920; // 设计图尺寸
		let html = document.documentElement;
		let wW = html.clientWidth;// 窗口宽度
		let rem = wW * 100 / designSize; 
		document.documentElement.style.fontSize = rem + 'px';
    }
    setRem()
    window.addEventListener('resize', setRem())
### 使用 CSS REM 实现响应式设计 REM 是一种相对单位,相对于根元素 (`<html>`) 的字体大小来计算。这种方式使得页面布局更加灵活和易于维护[^1]。 #### 设置 HTML 字体基础大小 为了确保整个文档的一致性和可预测性,在 `<html>` 或者 `<body>` 中定义一个基准字体大小是非常重要的: ```css html { font-size: 62.5%; /* 将默认的16px转换成10px */ } ``` 通过设置 `font-size` 属性为 `62.5%` 可以让后续基于 rem 单位的设计更方便地进行换算,因为此时浏览器默认的 16 像素变成了 10 像素作为新的基线[^2]。 #### 动态调整根元素字号 对于不同的设备宽度,可以通过媒体查询动态改变 html 元素上的 fontSize 来实现自适应效果: ```css @media (min-width: 768px) { html { font-size: 75%; } } @media (min-width: 992px) { html { font-size: 87.5%; } } @media (min-width: 1200px) { html { font-size: 100%; } } ``` 上述代码片段展示了根据不同断点调整全局字体比例的方法,从而影响到所有使用 rem 定义尺寸的内容[^3]。 #### 应用于具体样式属性 一旦设置了合适的 base size 后就可以放心大胆地在整个网站上应用 rem : ```css .container { width: 90rem; /* 相当于 90 * 当前html元素fontSize */ margin-left: auto; margin-right: auto; } button, input[type="submit"] { padding: .8rem 1.6rem; border-radius:.4rem ; } ``` 这里 `.container` 和按钮样式的宽高都依赖于当前环境下的实际像素值,而这些又取决于最初设定的基础字体大小以及任何可能存在的 media query 调整[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值