可能有很多新手小伙伴都知道rem是做手机端适配的,但却并不了解他,虽然并不影响你的使用。但如果是应对面试的话,可不仅仅就是会用就好了
我们先来看俩个例子
// 我写了俩个div
<div class="rem"></div>
<div class="em"></div>
// 样式 一个是以 rem为单位 一个是以em为单位
.rem{
width: 3rem;
height: 3rem;
background-color: #f00;
}
.em{
width: 3em;
height: 3em;
background: #00f;
}
看着页面上的显示效果好像是一样的哈
我打开了调试控制台 俩者也都是显示同样的 48*48 px的 宽高
这里可能就会发现点什么了 48 不正好是 3 的 16倍吗
那 1rem和1em 不就是 16px吗
对就是这样的
了解过rem和em的童鞋可能知道
rem是相对单位 相对于 html根元素 文本字体的大小
html根元素的获取方式 我也来说一下
document.getElementsByTagName(‘html’)[0] // 他的字体大小
而 em这块是相对于父元素继承来的 字体大小
rem可能好理解点 但是em 会有很多童鞋 理解错误
em 虽然指的是当前元素的 字体大小 但是当前元素的字体大小没有设置的话 就是继承它的父元素的 字体大
2.了解完概念之后 我们在重新修改下
// 我给 .em 加上 100px的大小 那么 1em=100px
.em{
/* em是相对于当前父元素继承来的 fz的字体大小 */
font-size: 100px;
width: 3em;
height: 3em;
background: #00f;
}
看页面效果 确实 .em的 div宽高 变成了 300*300
3.rem 这块 我也简单说一下
rem是相对于根html 元素的 但为什么 rem和em的初始宽高都是 16px呢
那是因为浏览器默认是 16px的字体大小
如果都不修改的话 rem和em都是继承来的
当然用户是可以修改浏览器字体显示大小的 这样会影响到 我们的页面布局效果
// 我用js代码 修改下 html根元素的字体大小 50px 那么 1rem=50px
document.getElementsByTagName('html')[0].style['font-size'] ='50px';
页面效果也确实变成了 150*150 的大小
4.当然 rem和em 都有适合自己的地方 没有那么绝对
现在在公司 很多时候 字体的设置 都是用em
当然 封装组件 最好还是 使用em 毕竟em是指向当前元素的 无论浏览器环境怎么变 能保持组件本身的样式
手机端适配 因为市面上各种分辨率 设备宽度不同的 手机太多 这个时候我们可以采用 将
根元素 字体大小固定的方式 来实现适配 手机端
就拿750宽度的设计稿来说吧
function setRootFontSize() {
var width = document.documentElement.clientWidth, fontSize;
if (width > 750) { width = 750 }
fontSize = (width / 7.5);//这里除于7.5的意思就是100px等于1rem;
// document.html.style.fontSize=fontSize+'px';
document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
}
setRootFontSize();
window.addEventListener('resize', function() {
setRootFontSize();
}, false);
这样吧 font-size 成固定的一个值
在 750设计稿 上 200px 就是 2rem
如果设计的页面到了 650的手机上 为了保证页面的显示效果相同
此时的 2rem 在 650宽度额手机上就是 173px会相对的缩小一点
如果还保持 750中的200px 可能会超出屏幕 给用户体验也不太好
如果在 650宽度的手机测量出来是 200px的话
计算方式: 650/7.5=200/x x=200*7.5/650 算出来是 x=2.307rem 明显比750大一点
好了到此 算是告一段落了 能帮到你一点点 我就很高兴了
生活那么苦,为啥不给自己一颗糖吃呢！坚持下去!你会看到不一样的风景！加油 奥利给！
