html显示屏幕中心1,HTML中常见的长度单位

8种机械键盘轴体对比

本人程序员&＃xff0c;要买一个写代码的键盘&＃xff0c;请问红轴和茶轴怎么选&＃xff1f;

THML中常见的8种长度

1、常见的单位

px&＃xff1a;像素(Pixel),相对于设备的长度单位&＃xff0c;像素是相对于显示器屏幕分辨率而言的。譬如&＃xff0c;Windows的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。

em&＃xff1a;相对长度单位。相对于当前对象内文本的字体尺寸。如当前行内文本的字体尺寸未被人为设置&＃xff0c;则相对于浏览器的默认字体尺寸。

ex&＃xff1a;相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。如当前对行内文本的字体尺寸未被人为设置&＃xff0c;则相对于浏览器的默认字体尺寸。

pt&＃xff1a;点(Point)&＃xff0c;绝对长度单位。

pc&＃xff1a;派卡(Pica)&＃xff0c;绝对长度单位。相当于我国新四号铅字的尺寸。

in&＃xff1a;英寸(Inch)&＃xff0c;绝对长度单位。

mm&＃xff1a;毫米(Millimeter)&＃xff0c;绝对长度单位。

cm&＃xff1a;厘米(Centimeter)&＃xff0c;绝对长度单位

2、理解

cm(厘米)也是随着显示器分辨率变化而变化的。

对于计算机的屏幕设备而言&＃xff0c;像素(Pixel)或者说px是一个最基本的单位&＃xff0c;就是一个点。其它所有的单位&＃xff0c;都和像素成一个固定的比例换算关系。所有的长度单位基于屏幕进行显示的时候&＃xff0c;都统一先换算成为像素的多少&＃xff0c;然后进行显示。所以&＃xff0c;就计算机的屏幕而言&＃xff0c;相对长度和绝对长度没有本质差别。任何单位其实都是像素&＃xff0c;差别只是比例不同。

如果把讨论扩展到其它输出设备&＃xff0c;比如打印机&＃xff0c;基本的长度单位可能不是像素&＃xff0c;而是其它的和生活中的度量单位一致的单位了。

CSS绝对长度单位是对于输出设备(output device)而言的。拿pt来说&＃xff0c;这是一个在文字排版工具(word,adobe等)中非常常用的字体单位&＃xff0c;不管你的显示器分辨率是1024×768&＃xff0c;还是800×600&＃xff0c;同一篇文档打印在纸面上的结果是一样的。

写网页用哪个长度单位更好&＃xff0c;是px还是pt呢&＃xff1f;

我个人比较偏向px&＃xff0c;因为px能够精确地表示元素在屏幕中的位置和大小&＃xff0c;网页主要是为了屏幕显示&＃xff0c;而不是为了打印等其它需要的。

3、相对长度

单位 说明

em 元素的字体高度

ex 字母x的高度

px 像素Pixels

% 百分比Percentage

4、换算的长度

转换公式&＃xff1a;

px to em:Example:12px / 16px &＃61; .75em

px to %:Example: 12px / 16px * 100 &＃61; 75%

px to pt:Example: 16px * 72 (72 points &＃61; 1 inch) / 96 (96 pixels per inch in Windows, 72 in Mac) &＃61; 12pt

em to px:Example: .75em * 16px &＃61; 12px

em to %:Example: .75em * 100 &＃61; 75%

% to px:Example: 75 * 16px / 100 &＃61; 12px

% to em:Example: 75 / 100 &＃61; .75em

pt to px:Example: 12pt * 96ppi / 72ppi &＃61; 16px

总结

现在看来&＃xff0c;用px做字体单位在IE下无法用浏览器字体缩放的功能的缺点已经不再是那么重要了。

因为新版本ie7&＃xff0c;ie8都已经支持整个网页的缩放功能&＃xff0c;包括火狐默认也是缩放整个网页&＃xff0c;而不是缩放css字体&＃xff0c;单纯的缩放字体意义不大了。

另外&＃xff1a;CSS3新增了一个相对单位&＃xff1a;rem&＃xff0c;这个单位引起了广泛的关注&＃xff0c;意思是(root em)根em&＃xff0c;区别在于使用rem为元素设定字体大小时&＃xff0c;仍然是相对大小&＃xff0c;但相对的只是HTML根元素。

目前&＃xff0c;除了IE8及更早版本外&＃xff0c;所有浏览器均已支持rem。对于不支持它的浏览器&＃xff0c;应对方法也很简单&＃xff0c;就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

Rem的例子&＃xff1a;

html { font-size: 62.5%;/10 ÷ 16 × 100% &＃61; 62.5%/ }

body { font-size: 1.4rem;/*1.4 × 10px &＃61; 14px */ }

h1 { font-size: 2.4rem;/2.4 × 10px &＃61; 24px/ }

p {font-size:14px; font-size:1.4rem;}

IE8及之前版本的IE浏览器使用14像素

根元素中定义了一个基本字体大小为62.5%(也就是10px。设置这个值主要方便计算&＃xff0c;如果没有设置&＃xff0c;将是以“16px”为基准 )。

从上面的计算结果&＃xff0c;我们使用“rem尺寸字体”就像使用“px尺寸字体”一样的方便。

页面加载自动生成meta标签&＃xff0c;做屏幕自适应功能

/**

*

* viewport scale根据设备像素比自动生成

* Html根元素font-size根据设备像素比自动生成

* by MC

*/

(document.DOMContentLoaded &＃61; function () {

var meta &＃61; document.createElement("meta"),

scale &＃61; 1.0 / window.devicePixelRatio;

meta.name &＃61; "viewport";

meta.content &＃61; "target-densitydpi&＃61;device-dpi,width&＃61;device-width,minimum-scale&＃61;" &＃43; scale &＃43; ",maximum-scale&＃61;" &＃43; scale &＃43; ",initial-scale&＃61;" &＃43; scale &＃43; ",user-scalable&＃61;no";

document.head.appendChild(meta);

document.documentElement.setAttribute("style", "font-size:" &＃43; 16 * window.devicePixelRatio &＃43; "px");

})();