REM - Githubissues

1.幽灵空白节点

主要相关的两个属性：vertical-align, line-height

vertical-align主要了解两个方面

对块级元素没用
默认是baseline

[ ] 英文4线格top，middle，baseline，bottom，然而baseline是倒数第二条线这就很好理解还有一条线的‘节点’间距当然单此一个条件不是充分必要的。

line-height我们主要了一个方面

默认值normal

[ ] normal根据相关字体大小计算得出的一般为1.1-1.2，由此是高于字体本身的，综合默认的vertical-align自然就有了所谓的‘幽灵空白节点’。

由此解决幽灵空白

把内元素改为块即元素，即是解决vertical-align失效。
修改vertical-align为最后一跳线，vertical-align: bottom。
主动设置line-height: 为一个足够小的值，那么块级高度为小于行内高度，就没有足够空间留给‘幽灵’。
设置font-size:0,由于默认的normal是根据字体大小来相对计算的，如果font-size
所以下面会有一定的幽灵距离距离，所以也就得处vertical-align: bottom可以解决，把line-height设置很小也能解决，由于line-height相对于font-size而言的，所以设置font-size:0 其实也是变相把line-height设置为0.

2 css px

不同设备的相对值，统一设备不同视口的绝对值

物理像素(设备像素)-device pixel：每个显示设备都是有一个一个的物理‘点’组成的，设备上俗称的分辨率就是这这些点的数量，比如1920*1080 就是宽高分别有1920个点和1080个点，在固定尺寸的显示设备上分辨率越高点的尺寸就越小，显示的就越清晰，手机里常说的PPI也就是单位像素密度也是说的这个物理像素点

由于各个设备像素和宽度不同，所以css像素是一个虚拟的相对值，相对的只是不同的设备而言，比如相同屏幕尺寸2k的和1k的1个css像素是不一样的，但是同一个显示设备内不管内容宽度是多少1个像素的值是常量。

3.自适应

@media 随着显示设备的升级以及移动端普及，固定常量的css像素已经很难满足市场显示需求，如果使用同样固定像素进行布局很难在多样的手机上展示一样的ui甚至都很难做到相似，样式bug自然出现，常见就是放不下，折行，溢出等诸多问题。

这期间媒体查询根据市面上常见的阈值来进行媒体查询虽然能解决一部分需求，但是手机尺寸型号越来越难以固定，这就导致媒体查询的代码越来越冗杂。 @media (max-width: 600px) { .h1 { font-size: 18px; } }

百分比'px'=>'%' 相对值就派上用场了，相对宽度值一开始流行于'px'=>'%'的转变，但是这样问题又来了，每一次html落地的时候，都得手动计算计，误差又会变大，且在高度的计算上又是偏差，出力不讨好，内部嵌套也存在隐患，同样不能完美解决，比如设计图在320的基础上 h1{ width: 160px} => h1{ width: 50%}

em em是以当前元素的字体为基准 h1{ font-size: 16px; height: 1em //16px }

但是由于em又继承的问题，如果嵌套不小心疏漏了很容易出错，这就相当于同意个变量名在不停的嵌套作用域被定义且被使用，很难想象不会出错，有种简单事情复杂化的感觉

.div1 { font-size: 100px } .div1 .div2 { font-size: 200px//一旦设置了次宽度就可能不是想要的 width: 0.5em } rem(root em) rem同样是相对字体大小为基准的，字面翻译自然知道是为‘根’的字体大小，这个‘根’自然就是dom的顶节点标签，由于是顶点不依赖任何标签也不存在继承，除了主动修改外不会有其他干扰，这样1rem就是一个相对稳定的量,不管你在dom任何地方用到它都是固定的，可以把rem理解为em的升级版

html { font-size: 100px } .div1 { width: 0.2rem //20px } 固定了html的值那么rem其实也只是一个变相的px而已也没有做到自适应，那么我们只需要根据不同内容款低设置html font-size 把font-size改为动态就可以实现。

例如在宽屏font-size: 100px，窄屏幕font-size: 50px，相应的div也就成为动态的了。

所以使用rem之前首先得要定义动态rem 也就是html的根字体大小

方法一： 媒体查询，根据不同尺寸设置不同，

@media (max-width: 600px) {
  html {
font-size: 100px
}
}

随着css预处理的加入我们可以像写js一样的去写媒体查询，写法虽然简单了，但是实质还是媒体查询

@each $width in 100px, 200px, 300px, 400px {
@media screen and (min-width: $width) {
html {
font-size: 100px * ($width / 375px)
//由于我们设计常用iphone6宽度375设计，所以我们把375当作一个基准点
}
}
}

这样不好的一点就是大面积的要涵盖各个尺寸容易疏漏，所以我们用js手动修改html字体大小

(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

其他字体问题 其他pc浏览器font-size最小是12px，虽然移动端可以显示小于12px的字体，但是根据安卓和ios浏览器对不同字体解释不通，导致留白不同，尤其是通过line-height进行垂直居中的时候出现无法居中的情况，鉴于这种情况推荐使用2倍再缩小0.5倍即可解决常用与我们商品详情tag，name mark等

.div1 {
height: 11px
line-height: 11px
border: 1px solid #f60;
border-radius: 4px;
}

.div1 {
height: 22px
line-height: 22px
   transform: scale(0.5);
   transform-origin: 0 0;
border: 1px solid #f60;
border-radius: 4px;
}

mengtuifrontend / Blog

REM #29

1.幽灵空白节点

2 css px

3.自适应