没有合适的资源?快使用搜索试试~ 我知道了~
rem适配移动设备的方法示例
0 下载量 17 浏览量
2020-11-21
19:54:56
上传
评论
收藏 52KB PDF 举报
温馨提示
试读
2页
前言 移动端 rem 适配方案回顾总结 如何使用 rem rem 单位的计算参考 html 的根节点 font-size进行计算,根节点的字体变化,布局参考的 rem 页面也会相应进行缩放,此为 rem 布局的本质。 1. 动态改变 html 的 font-size 值 几乎在每个浏览器都将 html 的 font-size 初始化 为 16px , 我们动态改变的话可以暂时将 16px 设置为 rem 适配的根节点 font-size 初始值。 那么如何进行适配动态修改? 假定设计稿宽度 为 750px,我们定义了自己使用 1rem = 16px 的单位去布局,如何适配呢? 在 chrome
资源详情
资源评论
资源推荐
rem适配移动设备的方法示例适配移动设备的方法示例
前言前言
移动端 rem 适配方案回顾总结
如何使用如何使用 rem
rem 单位的计算参考 html 的根节点 font-size进行计算,根节点的字体变化,布局参考的 rem 页面也会相应进行缩放,此为
rem 布局的本质。
1. 动态改变动态改变 html 的的 font-size 值值
几乎在每个浏览器都将 html 的 font-size 初始化 为 16px , 我们动态改变的话可以暂时将 16px 设置为 rem 适配的根节点
font-size 初始值。
那么如何进行适配动态修改?
假定设计稿宽度 为 750px,我们定义了自己使用 1rem = 16px 的单位去布局,如何适配呢?
在 chrome 的 手机 iphone 模拟器宽度为 375px,正好为设计稿的 一半,我们可以口算: 当时的 1rem 应该等于初始化时 html
节点 font-size 的一半,即 newFontSize = 16/2 = 8px,这样一半对一半不就适配了吗…
从中得到公式 设计稿宽度/16px = 需要适配的设备宽度/8px,能够看出 新的 font-size 是参考 当前的设备宽度与原设计稿的宽
度,进行等比缩放的
最终得到 newFontSize = 16px * 需要适配的设备宽度 / 原设计稿宽度
(function(doc, win) {
var resizeEvt =
"orientationchange" in window ? "orientationchange" : "resize",
setRemResponse = function() {
var vM = 750;
var vfontSize = 16;
var html = doc.documentElement;
var newfontSize = (vfontSize * html.clientWidth) / vM;
html.style.fontSize = newfontSize + "px";
};
doc.addEventListener("DOMContentLoaded", setRemResponse, false);
win.addEventListener(resizeEvt, setRemResponse, false);
})(document, window);
2. 实际使用实际使用
将测量得出的btn 按钮的样式从 px转换 为 rem
.btn {
width: 699px; /* 699/16 => 43.6875rem; */
height: 90px; /* 90/16px => 5.625rem; */
background: rgba(90, 173, 246, 1);
border-radius: 6px; /* 6/16=> 0.375rem; */
}
自己计算太繁琐,使用 scss 定义 函数代替计算过程
@function pxToRem($initialStyle) {
@return $initialStyle/16 * 1rem;
}
那么上面的 css改写为:
.btn {
width: pxToRem(699);
height:pxToRem(90);
background: rgba(90, 173, 246, 1);
border-radius:pxToRem(6);
}
补充: vscode 的插件 cssrem 支持计算 将我们在 css,scss 中输入的 px 转换为 rem 单位,默认设置的 font-size 为 16px
计算方法变形,口算计算方法变形,口算 rem
weixin_38653508
- 粉丝: 2
- 资源: 904
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0