REM手机屏幕适配


以设计稿的宽度为750px(iphone6屏幕尺寸 的2两倍),即:designWidth = 750,同时设定在750px屏宽下 1rem=100px ,即:rem2px = 100。


设置 1rem=100px 的优点不言而喻。前端开发者在切图、重构页面的时候,通过直接位移小数点的方式,就可以将UI图中测量到的 px 值换算成对应的 rem 值,方便快捷。


此外,在 head 中我们还设置了:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

以下方法存在一些误差

document.documentElement.style.fontSize =
  ((window.innerWidth / designWidth) * rem2px) + 'px';

更多详细参考rem手机适配

### H5 REM 移动端网页适配方法 #### 使用REM进行移动端适配的优势 REM是一种相对单位,其相对于`<html>`根元素的字体大小而言。通过调整HTML标签内的font-size属性可以实现整个页面元素按比例缩放的效果[^2]。 #### 配置lib-flexible插件 对于Vue项目,在使用REM之前通常会先引入`lib-flexible`这个库来动态设置文档的基准字体大小。安装并配置该插件能够帮助自动计算不同屏幕宽度下的合理基础字号,从而简化后续开发工作中的样式编写难度[^3]。 ```bash npm install lib-flexible --save ``` 接着在项目的入口文件(main.js)里导入此模块: ```javascript import 'lib-flexible' ``` #### 设置默认字体大小 为了让REM生效,还需要确保CSS中有如下定义,这一步骤是为了给定一个初始值以便其他地方基于它做进一步的比例转换: ```css html { font-size: 16px; /* 或者根据实际需求设定 */ } ``` #### 编写响应式的CSS规则 当完成了上述准备工作之后就可以放心大胆地利用REM作为长度度量单位去构建灵活多变的设计了。下面是一个简单的例子展示了如何创建一个按钮组件,并让它的尺寸随着视窗变化而相应调整: ```scss .button { padding: .8rem; border-radius: .4rem; background-color: #ffeb3b; @media (min-width: 768px){ padding: 1.2rem; border-radius: .6rem; } } ``` #### 结合媒体查询优化体验 除了单纯依赖REM之外,还可以配合@media queries来做更细致入微的表现形式定制化处理。比如上面的例子中就额外增加了针对平板及以上设备的具体表现方式描述。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值