郑州网站建设
郑州网页设计
郑州网站优化
郑州建站
当前位置:首页 > 新闻中心 > 网页制作

网站建设中pt、px、em、rem、ex、cm的区别

网站地址:www.hugekj.com  时间:2019-04-29  关键词:郑州网页设计,郑州网站建设,郑州网站优化公司  浏览:

  想必做网站的人都知道,再写样式的时候我们经常会用到pt、px、em、rem、ex、cm这种代表长度单位的名称,它们都有什么区别呢?下面就是郑州网页设计给大家分享的有关资料希望能帮到大家。eQQ郑州网站建设_网站优化_网页设计-河南数威网络

  在CSS样式表中,长度单位分两种:eQQ郑州网站建设_网站优化_网页设计-河南数威网络

  相对长度单位,如px, em等eQQ郑州网站建设_网站优化_网页设计-河南数威网络

  绝对长度单位,如pt,mm等eQQ郑州网站建设_网站优化_网页设计-河南数威网络

  也谈px和pt的区别eQQ郑州网站建设_网站优化_网页设计-河南数威网络

  经常看到有人拿px和pt比较,主要是为了争辩在确定字体大小(font-size)或其它CSS属性大小时,用什么样的CSS长度单位更加好。有人说,用pt更好,因为pt是绝对长度单位,不会因为屏幕分辨率大小,或者其它因素而改变。eQQ郑州网站建设_网站优化_网页设计-河南数威网络

  我去做了一个测试,写了这样一个HTML例子。代码如下:eQQ郑州网站建设_网站优化_网页设计-河南数威网络

   <html>eQQ郑州网站建设_网站优化_网页设计-河南数威网络
eQQ郑州网站建设_网站优化_网页设计-河南数威网络
<head><title>CSS单位长度区别 - px和pt的区别</title></head>eQQ郑州网站建设_网站优化_网页设计-河南数威网络
eQQ郑州网站建设_网站优化_网页设计-河南数威网络
<body >eQQ郑州网站建设_网站优化_网页设计-河南数威网络
eQQ郑州网站建设_网站优化_网页设计-河南数威网络
<p style = "font-size:20pt;">Font-size is 20pt</p>eQQ郑州网站建设_网站优化_网页设计-河南数威网络
eQQ郑州网站建设_网站优化_网页设计-河南数威网络
<p style = "font-size:20px;">Font-size is 20px</p>eQQ郑州网站建设_网站优化_网页设计-河南数威网络
eQQ郑州网站建设_网站优化_网页设计-河南数威网络
</body>eQQ郑州网站建设_网站优化_网页设计-河南数威网络
eQQ郑州网站建设_网站优化_网页设计-河南数威网络
</html>eQQ郑州网站建设_网站优化_网页设计-河南数威网络

  我将我的显示器分别调到1024*768和800*600的分辨率(指screen resolution)。不管是用pt还是用px设置的字体,都随着分辨率变化而变化。(我使用的浏览器是IE6,其它浏览器上尚未测试过。)eQQ郑州网站建设_网站优化_网页设计-河南数威网络

  我又写了另外一个HTML例子,测试一下cm(厘米)。代码如下:eQQ郑州网站建设_网站优化_网页设计-河南数威网络

        <html>eQQ郑州网站建设_网站优化_网页设计-河南数威网络
eQQ郑州网站建设_网站优化_网页设计-河南数威网络
           <head><title>CSS长度单位的区别 - pt,px和cm的区别</title></head>eQQ郑州网站建设_网站优化_网页设计-河南数威网络
eQQ郑州网站建设_网站优化_网页设计-河南数威网络
        <body >

  这个是div宽度300pt,高度30pt:<div style = "width:300pt;height:30pt;border:1px solid blue;"></div>eQQ郑州网站建设_网站优化_网页设计-河南数威网络

  这个div宽度300px,高度30px: <div style = "width:300px;height:30px;border:1px solid blue;"></div>eQQ郑州网站建设_网站优化_网页设计-河南数威网络
eQQ郑州网站建设_网站优化_网页设计-河南数威网络
  这个div宽度10cm,高度3cm: <div style = "width:10cm;height:3cm;border:1px solid blue;"></div>eQQ郑州网站建设_网站优化_网页设计-河南数威网络
</body>eQQ郑州网站建设_网站优化_网页设计-河南数威网络
eQQ郑州网站建设_网站优化_网页设计-河南数威网络
</html>eQQ郑州网站建设_网站优化_网页设计-河南数威网络

  结果是,cm(厘米)也是随着显示器分辨率变化而变化的。eQQ郑州网站建设_网站优化_网页设计-河南数威网络

  对于计算机的屏幕设备而言,像素(Pixel)或者说px是一个最基本的单位,就是一个点。其它所有的单位,都和像素成一个固定的比例换算关系。所有的长度单位基于屏幕进行显示的时候,都统一先换算成为像素的多少,然后进行显示。所以,就计算机的屏幕而言,相对长度和绝对长度没有本质差别。任何单位其实都是像素,差别只是比例不同。eQQ郑州网站建设_网站优化_网页设计-河南数威网络

  如果把讨论扩展到其它输出设备,比如打印机,基本的长度单位可能不是像素,而是其它的和生活中的度量单位一致的单位了。eQQ郑州网站建设_网站优化_网页设计-河南数威网络

  CSS绝对长度单位是对于输出设备(output device)而言的。拿pt来说,这是一个在文字排版工具(word,adobe等)中非常常用的字体单位,不管你的显示器分辨率是1024*768,还是800*600,同一篇文档打印在纸面上的结果是一样的。eQQ郑州网站建设_网站优化_网页设计-河南数威网络

  写网页用哪个长度单位更好,是px还是pt呢?eQQ郑州网站建设_网站优化_网页设计-河南数威网络

  我个人比较偏向px,因为px能够精确地表示元素在屏幕中的位置和大小,网页主要是为了屏幕显示,而不是为了打印等其它需要的。eQQ郑州网站建设_网站优化_网页设计-河南数威网络

  CSS相对长度单位(relative length unit)eQQ郑州网站建设_网站优化_网页设计-河南数威网络

  CSS相对长度单位中的相对二字,表明了其长度单位会随着它的参考值的变化而变化,不是固定的。eQQ郑州网站建设_网站优化_网页设计-河南数威网络

  以下是CSS相对长度单位列表:eQQ郑州网站建设_网站优化_网页设计-河南数威网络

  CSS相对长度单位说明eQQ郑州网站建设_网站优化_网页设计-河南数威网络

  em元素的字体高度The height of the element's fonteQQ郑州网站建设_网站优化_网页设计-河南数威网络

  ex字母x的高度The height of the letter "x"eQQ郑州网站建设_网站优化_网页设计-河南数威网络

  px像素PixelseQQ郑州网站建设_网站优化_网页设计-河南数威网络

  %百分比PercentageeQQ郑州网站建设_网站优化_网页设计-河南数威网络

  CSS绝对长度单位(absolute length unit)eQQ郑州网站建设_网站优化_网页设计-河南数威网络

  绝对长度单位是一个固定的值。比如我们常用的有mm,就是毫米的意思。eQQ郑州网站建设_网站优化_网页设计-河南数威网络

  以下是CSS绝对长度单位列表:eQQ郑州网站建设_网站优化_网页设计-河南数威网络

  CSS绝对长度单位说明eQQ郑州网站建设_网站优化_网页设计-河南数威网络

  in英寸Inches (1 英寸 = 2.54 厘米)eQQ郑州网站建设_网站优化_网页设计-河南数威网络

  cm厘米CentimeterseQQ郑州网站建设_网站优化_网页设计-河南数威网络

  mm毫米MillimeterseQQ郑州网站建设_网站优化_网页设计-河南数威网络

  pt点Points (1点 = 1/72英寸)eQQ郑州网站建设_网站优化_网页设计-河南数威网络

  pc皮卡Picas (1 皮卡 = 12 点)eQQ郑州网站建设_网站优化_网页设计-河南数威网络
 eQQ郑州网站建设_网站优化_网页设计-河南数威网络
      其实郑州网站建设还是建议大家去尝试一下,这样子会记的更清楚。俗话说的“好好记性不如烂笔头”道理大家都明白,所以动手写写代码,大家就在在平常用的时候注意了。eQQ郑州网站建设_网站优化_网页设计-河南数威网络
eQQ郑州网站建设_网站优化_网页设计-河南数威网络
     文章原创来源于郑州数威网络科技www.hugekj.com,转载请注明。eQQ郑州网站建设_网站优化_网页设计-河南数威网络

联系电话

17600315583

关注我

  • 郑州中原区郑上路须水工贸园
  • 1449585010@qq.com
  • 豫ICP备16041980号-1百度地图