阿洁的个人博客
web前端
晋ICP备17005336号

css的尺寸单位

CSS尺寸单位(字体)

%

  • 常用%为单位配合@media媒介查询来进行自适应布局。css3新出的更方便。

px   

      px像素(Pixel)屏幕上的一个点。像素px是相对于显示器屏幕分辨率而言的。

  • 1. IE无法调整那些使用px作为单位的字体大小;
  • 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;
  • 3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。

em

  • em是相对长度单位。相对于当前对象内文本的字体尺寸。
  • 如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸,默认字体高都是16px。
  • 12px=0.75em,10px=0.625em,在css中的body选择器中声明Font-size=62.5%。
  • 这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em。
  • 就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
  • 使用起来因为涉及到大量的运算,很不方便,因此平时使用不是很多。

rem(css3最佳)

  • rem是CSS3新增的一个相对单位(root em,根em),最好用的单位。
  • 目前,除了IE8及更早版本外,所有浏览器均已支持rem。
  • 兼容写法 :p {fontsize:14px; fontsize:.875rem;}//注意是0.875的简写
  • <style>
              html {font-size: 14px;}
               div {font-size: 1.5rem;}
    </style>
    <body>
             <div>字体大小为:14px * 1.5 = 21px
             </div>
    </body>

vh 和 vw(不常用)

  • 在响应式页面常用%布局,百分比是相对于父元素。
  • vh和vw是针对页面显示区域的单位。
  • 1vh = viewportHeight * 1/100;
    1vw = viewportWidth * 1/100;
  • 用vh、vw就可以保证元素的宽高适应不同设备。

vmin 和 vmax(不常用)

  • vw 和 vh 对应 viewport 的 width和height
  • 分别对应于width、height中的最小值和最大值(例如:W大于H)
  • 1vmin = H * 1/100;
    1vmax = W * 1/100;

px 与 rem 的选择?

  • 对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px即可 。
  • 对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

 

2017-11-16
暂无评论

发表评论