CSS单位

CSS单位

CSS单位

CSS长度单位

px

px是你屏幕设备物理上能显示出的最小的一个点。 px是被定义为小但仍可见，并且水平向的1px宽的线可以清晰地显示出来的单位(无抗锯齿)。

https://www.w3.org/Style/Examples/007/units.zh_CN.html

em

em 被定义为相对于当前对象内文本的字体大小(font-size)。font-size默认会继承父级的大小。

<style media="screen">
body {
    font-size: 14px;
}
div {
    font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
}
</style>
<body>
    <div>
        Test <!-- 14 * 1.2 = 16.8px -->
        <div>
            Test <!-- 16.8 * 1.2 = 20.16px -->
            <div>
                Test <!-- 20.16 * 1.2 = 24.192px -->
            </div>
        </div>
    </div>
</body>

See the Pen Cascading em Values by Envato Tuts+ (@tutsplus) on CodePen.

rem

基于一个根元素（大多数情况下是html元素）设置元素的大小。

html {
    font-size: 14px;
}
div {
    font-size: 1.2rem;//14*1.2
}

<body>
    <div>
        Test <!-- 14 * 1.2 = 16.8px -->
        <div>
            Test <!-- 14 * 1.2 = 16.8px -->
            <div>
                Test <!-- 14 * 1.2 = 16.8px -->
            </div>
        </div>
    </div>
</body>

vh and vw

1vh 等于1/100的视口高度。

浏览器高度900px, 1 vh = 900px/100 = 9 px。

同理，vw就是视口（viewport）就宽度的1/100。

vmin and vmax

vmin 和 vmax则关于视口高度和宽度两者的最小或者最大值。

如果浏览器设置为1100px宽、700px高，1vmin会是7px,1vmax为11px。然而，如果宽度设置为800px，高度设置为1080px，1vmin将会等于8px而1vmax将会是10.8px。

ex and ch

ex和ch单位是基于字体（font-family）的度量单位，依赖于设定的字体

ex单位被定义为0字符的宽度。

<div class='x' style='display:inline-block;'>xxxx</div>
<div class="line" style='display:inline-block;overflow:hidden;height:1ex;background:#aaa;width:50px;color:#fff;'>xx</div>
<div class="line" style='display:inline-block;overflow:hidden;height:2ex;background:#aaa;width:50px;color:#fff;'>xx</div>
<div class='x' style='display:inline-block;font-size:2em'>xxxx</div>

定义一条与字母x高度相同的线：

xxxxxxxxxxxx

ch单位被定义为那个字体的小写x的高度。

<style>
    h1{margin:10px 0;font-size:16px;}
    div{overflow:hidden;width:10ch;background:#ccc;}
</style>

<h1>定义一个宽度正好能装下10个0的容器：</h1>
<div>0000000000</div>

定义一个宽度正好能装下10个0的容器：

0000000000

参考

CSS像素定义

硬件像素：显示器的物理像素。例如，iPhone 5所配屏幕的水平硬件像素为640。

设备无关像素(dip)：：计算机坐标系统中的一个点，该点代表一个可由程序使用并控制的虚拟像素，然后由相关系统转换为物理像素。此像素在所有设备上大小几乎相同，iPhone 5的设备无关像素宽度为320。

CSS像素 用于页面布局的单位，由视口控制。样式的像素尺寸（例如width: 100px）是以CSS像素为单位指定的。CSS像素与设备无关像素的比例即为网页的比例系数或缩放级别。

比如iPhone 5使用的是Retina视网膜屏幕，使用2px x 2px的 device pixel 代表 1px x 1px的 css pixel，所以设备像素数为640 x 1136px，而CSS逻辑像素数为320 x 568px。

设备像素比 = 硬件像素/设备无关像素 // 在某一方向上，x方向或者y方向

添加属性initial-scale=1均可指示浏览器将CSS像素与设备无关像素的比例设为1:1（而不用考虑设备的屏幕方向），并且可让网页利用整个横向宽度。

//打印台中输入

console.log(screen.availHeight);
//568
console.log(screen.availWidth);
//320
console.log(window.devicePixelRatio);
//2

参考

viewport

一个空的 div ，其宽度默认是100%。它是继承其父元素 body，而body的宽度又是继承其父元素 html。所以 body 元素和它的父元素 html一样宽。

html 元素的宽度是被viewport的宽度所限制的。 html 元素使用viewport宽度的100%。

移动端可以添加以下设置修正屏幕大小与网页布局不一致的问题：

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />

width决定了layout viewport的值。

viewport 的最好宽度是ideal viewport，用ideal viewport设置layout viewport的大小。
https://github.com/ant-design/ant-design-mobile/wiki/viewport%E8%AF%A6%E8%A7%A3 http://blog.csdn.net/aiolos1111/article/details/51967744 http://www.cnblogs.com/HCJJ/p/6347242.html http://www.cnblogs.com/Mrs-cc/p/5329545.html

重置fontSize

var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');

dpr = window.devicePixelRatio || 1;
rem = docEl.clientWidth * dpr / 10;
scale = 1 / dpr;


// 设置viewport，进行缩放，达到高清效果
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');

// 设置data-dpr属性，留作的css hack之用
docEl.setAttribute('data-dpr', dpr);

// 动态写入样式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';

// 给js调用的，某一dpr下rem和px之间的转换函数
window.rem2px = function(v) {
    v = parseFloat(v);
    return v * rem;
};
window.px2rem = function(v) {
    v = parseFloat(v);
    return v / rem;
};

window.dpr = dpr;
window.rem = rem;

http://www.html-js.com/article/3041

PreviousCSS选择器 Nextline-height与vertical-align

Last updated 6 years ago

Was this helpful?