首先介绍下 rem
说起 rem 就的说 px,em;
PX 为单位
在 web 页面初期制作中, 我们都是使用 px 来设置我们的文本, 因为他比较稳定和精确但是这种方法存在一个问题, 当用户在浏览器中浏览我们制作的 Web 页面时, 他改变了浏览器的字体大小, 这时会使用我们的 Web 页面布局被打破这样对于那些关心自己网站可用性的用户来说, 就是一个大问题了因此, 这时就提出了使用 em 来定义 Web 页面的字体
em 为单位 font size of the element
前面也说了, 使用是 px 为单位是比较方便, 而又一致, 但在浏览器中放大或缩放浏览页面时会存在一个问题, 要解决这个问题, 我们可以使用 em 单位 Richard Rutter'在 How to size text using ems 一文中有做过详细的介绍, 追至早一点, Richard Rutter 也在 How to Size Text in CSS 中进行过深入的剖析
这种技术需要一个参考点, 一般都是以 <body> 的 font-size 为基准比如说我们使用 1em 等于 10px 来改变默认值 1em=16px, 这样一来, 我们设置字体大小相当于 14px 时, 只需要将其值设置为 1.4em
- body {
- font - size: 62.5 % ; /*10 ÷ 16 × 100% = 62.5%*/
- }
- h1 {
- font - size: 2.4e m; /*2.4em × 10 = 24px */
- }
- p {
- font - size: 1.4e m; /*1.4em × 10 = 14px */
- }
- li {
- font - size: 1.4e m; /*1.4 × ? = 14px ? */
- }
为什么 li 的 1.4em 是不是 14px 将是一个问号呢? 如果你了解过 em 后, 你会觉得这个问题是多问的前面也简单的介绍过一回, 在使用 em 作单位时, 一定需要知道其父元素的设置, 因为 em 就是一个相对值, 而且是一个相对于父元素的值, 其真正的计算公式是:
所以 em:1 ÷ 父元素的 font-size × 需要转换的像素值 = em 值
这样的情况下 1.4em 可以是 14px, 也可以是 20px, 或者说是 24px, 总之是一个不确定值, 那么解决这样的问题, 要么你知道其父元素的值, 要么呢在任何子元素中都使用 1em 这样一来可能又不是我们所需要的方法
Rem 为单位 font size of the root element
CSS3 的出现, 他同时引进了一些新的单位, 包括我们今天所说的 rem
我们来看一个简单的代码实例:
- html { font - size: 62.5 % ; /*10 ÷ 16 × 100% = 62.5%*/ }
- body { font - size: 1.4 rem; /*1.4 × 10px = 14px */ }
- h1 { font - size: 2.4 rem; /*2.4 × 10px = 24px*/ }
我在根元素 < html > 中定义了一个基本字体大小为 62.5%(也就是 10px 设置这个值主要方便计算, 如果没有设置, 将是以 16px 为基准 ) 从上面的计算结果, 我们使用 rem 就像使用 px 一样的方便, 而且同时解决了 px 和 em 两者不同之处
那么在 rem 的计算上, 我们可以用:
- html {
- font - size: 20 px;
- }
- @media only screen and(min - width: 401 px) {
- html {
- font - size: 25 px!important;
- }
- }
- @media only screen and(min - width: 428 px) {
- html {
- font - size: 26.75 px!important;
- }
- }
- @media only screen and(min - width: 481 px) {
- html {
- font - size: 30 px!important;
- }
- }
- @media only screen and(min - width: 569 px) {
- html {
- font - size: 35 px!important;
- }
- }
- @media only screen and(min - width: 641 px) {
- html {
- font - size: 40 px!important;
- }
- }
也可以
- ; (function(win, lib) {
- var doc = win.document;
- var docEl = doc.documentElement;
- var metaEl = doc.querySelector('meta[name="viewport"]');
- var flexibleEl = doc.querySelector('meta[name="flexible"]');
- var dpr = 0;
- var scale = 0;
- var tid;
- var flexible = lib.flexible || (lib.flexible = {});
- if (metaEl) {
- // 将根据已有的 meta 标签来设置缩放比例
- var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
- if (match) {
- scale = parseFloat(match[1]);
- dpr = parseInt(1 / scale);
- }
- } else if (flexibleEl) {
- var content = flexibleEl.getAttribute('content');
- if (content) {
- var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
- var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
- if (initialDpr) {
- dpr = parseFloat(initialDpr[1]);
- scale = parseFloat((1 / dpr).toFixed(2));
- }
- if (maximumDpr) {
- dpr = parseFloat(maximumDpr[1]);
- scale = parseFloat((1 / dpr).toFixed(2));
- }
- }
- }
- if (!dpr && !scale) {
- var isAndroid = win.navigator.appVersion.match(/android/gi);
- var isIPhone = win.navigator.appVersion.match(/iphone/gi);
- var devicePixelRatio = win.devicePixelRatio;
- if (isIPhone) {
- // iOS 下, 对于 2 和 3 的屏, 用 2 倍的方案, 其余的用 1 倍方案
- if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
- dpr = 3;
- } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
- dpr = 2;
- } else {
- dpr = 1;
- }
- } else {
- // 其他设备下, 仍旧使用 1 倍的方案
- dpr = 1;
- }
- scale = 1 / dpr;
- }
- docEl.setAttribute('data-dpr', dpr);
- if (!metaEl) {
- metaEl = doc.createElement('meta');
- metaEl.setAttribute('name', 'viewport');
- metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
- if (docEl.firstElementChild) {
- docEl.firstElementChild.appendChild(metaEl);
- } else {
- var wrap = doc.createElement('div');
- wrap.appendChild(metaEl);
- doc.write(wrap.innerHTML);
- }
- }
- function refreshRem() {
- var width = docEl.getBoundingClientRect().width;
- if (width / dpr > 540) {
- width = 540 * dpr;
- }
- var rem = width / 10;
- docEl.style.fontSize = rem + 'px';
- flexible.rem = win.rem = rem;
- }
- win.addEventListener('resize',
- function() {
- clearTimeout(tid);
- tid = setTimeout(refreshRem, 300);
- },
- false);
- win.addEventListener('pageshow',
- function(e) {
- if (e.persisted) {
- clearTimeout(tid);
- tid = setTimeout(refreshRem, 300);
- }
- },
- false);
- if (doc.readyState === 'complete') {
- doc.body.style.fontSize = 12 * dpr + 'px';
- } else {
- doc.addEventListener('DOMContentLoaded',
- function(e) {
- doc.body.style.fontSize = 12 * dpr + 'px';
- },
- false);
- }
- refreshRem();
- flexible.dpr = win.dpr = dpr;
- flexible.refreshRem = refreshRem;
- flexible.rem2px = function(d) {
- var val = parseFloat(d) * this.rem;
- if (typeof d === 'string' && d.match(/rem$/)) {
- val += 'px';
- }
- return val;
- }
- flexible.px2rem = function(d) {
- var val = parseFloat(d) / this.rem;
- if (typeof d === 'string' && d.match(/px$/)) {
- val += 'rem';
- }
- return val;
- }
- })(window, window['lib'] || (window['lib'] = {}));
参考:
- https://isux.tencent.com/web-app-rem.html
- http://www.jb51.net/article/94748.htm
- http://www.w3cplus.com/css3/define-font-size-with-css3-rem
- JavaScript
- CSS
来源: https://juejin.im/entry/5a8e337af265da4e9e306fe2