CSS3新单位——rem学习

  近期,公司招了一个前端,看他的代码时,有特别多的rem作为单位。对于我这种H5小菜鸟来说,没有办法,又被强制学习了一波。    rem是css3中新增加的一个单位属性(font size of the root element),根据页面的根节点的字体大小进行转变的单位。而根节点就是<html>节点。

html{font-size:100px};
1rem=100px;

  如果没有对根节点的font-size复制,则rem使用默认值16px。即1rem=16px。   rem可以很好解决webApp不同屏幕的适配问题,只要动态改变font-size的值,就可以应对不同的屏幕分辨率。

html,body{ height: 100%; margin: 0; padding: 0; font-size: 14px;}//注意初始样式必须写在最顶部!!!!如果写在媒体查询底部的话就会覆盖上方的媒体查询(因为是层叠样式表嘛~)
@media screen and (max-width:320px ) {
    html{font-size: 12px;}
}
@media screen and (min-width:321px) and (max-width:750px ) {
    html{font-size: 14px;}
}
@media screen and (min-width:751px ) {
    html{font-size: 16px;}
}

  提供一个动态获取屏幕宽度并且为font-size赋值的方法。

let htmlwidth = document.documentElement.clientWidth || document.body.clientWidth;
let htmlDom = document.getElementsByTagName('html')[0];
htmlDom.style.fontSize = htmlwidth / 10 + 'px';
window.addEventListener('resize', (e) => {
  let htmlwidth = document.documentElement.clientWidth || document.body.clientWidth;
  let htmlDom = document.getElementsByTagName('html')[0];
  htmlDom.style.fontSize = htmlwidth / 10 + 'px';
})

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python中文社区

高阶爬虫实战:破解极验滑动验证码

今天给大家带来的是极验验证码的selenium破解之法,是不是有点小激动呢,小伙伴们等不及了,让我们赶紧直入主题吧。

79960
来自专栏LeeCen

将原点移动到navigationBar下面(或UIScrollView和 cell加载子视图偏移64问题)

10320
来自专栏吴小龙同學

Android 8.0 自适应图标

890100
来自专栏QQ音乐前端团队专栏

制作60fps的高性能动画

说到web的高性能动画,这部分内容其实已经是老生常谈的了,不过其中还是有不少比较新的而且非常实用的内容可以和大家分享一下。

94440
来自专栏理论坞

那些你不知道的Ps冷知识③——完结

本条是针对PSCC及以上版本的技巧(在PSCC发布之初本是没有这个功能的,后续的更新中才加上),第一次使用CC时相信很多人在使用路径选择工具时都有一些不适感——...

8210
来自专栏用户画像

滚动条下拉时 table 的thead 固定在网页固定在顶部不动

14510
来自专栏nnngu

基于 React + Webpack 的音乐相册项目(下)

笔记仓库:https://github.com/nnngu/LearningNotes

309100
来自专栏数据小魔方

office颜色配置技巧与自定义颜色主题

上一篇给大家介绍了基础的色彩知识,今天要跟大家简单介绍一下office(office系列所有套件的调色板是通用的)办公软件的内置色板的使用技巧以及如何自定义颜色...

39370
来自专栏菩提树下的杨过

silverlight 相册雏型

这篇应该是"silverlight3的"伪"3D续--图片横向轮换"的后续篇章,代码基本上从上篇代码修改而来,界面则抄袭了nasa的相册,自己一直做数据库相关的...

281100
来自专栏吴老师移动开发

【iOS开发】我是这样封装view的前言示例关于扩展

一个有经验的开发,碰到一些特殊的UI控件,脑海中应该是有好几种实现方案的,同时也能记起一些第三方相似的开源控件。为了应对产品的需求变更,UI效果的变更,以及做到...

16010

扫码关注云+社区

领取腾讯云代金券