zoukankan      html  css  js  c++  java
  • css布局中的百分比布局

    1、在说到百分比是前,先简单了解下基本的单位

    英寸(inch) :in 1 in=2.54cm
    厘米(centimeter):cm
    毫米(millimeter):mm
    磅(point):pt 1pt=1/72 in
    皮卡(pica):pc 1pc==12 pt
    像素(pixel unit):px 1px=0.75 pt
    相对长度单位(相对于当前对象内文本的字体尺寸):em 1em=16px
    CSS3新增的一个相对单位root em: rem 1rem=16px

    注意:如果是定位的元素,则是相对最近的定位父级元素

    应用场景

    1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

    因此,1em的默认大小是16px。可以通过下面这个公式将像素转换为em:px/16=em

    实例

    h1 {font-size:2.5em;} /* 40px/16=2.5em */
    h2 {font-size:1.875em;} /* 30px/16=1.875em */
    p {font-size:0.875em;} /* 14px/16=0.875em */

    如果使用 em 单位,则可以在所有浏览器中调整文本大小。

    不幸的是,仍然是IE浏览器的问题。调整文本的大小时,会比正常的尺寸更大或更小。

    解决方法

    使用百分比和EM组合

    在所有浏览器的解决方案中,设置 <body>元素的默认字体大小的是百分比:

    实例

    body {font-size:100%;}
    h1 {font-size:2.5em;}
    h2 {font-size:1.875em;}
    p {font-size:0.875em;}

    我们的代码非常有效。在所有浏览器中,可以显示相同的文本大小,并允许所有浏览器缩放文本的大小。

    方法二

    浏览器默认字体16px,我们可以设置,body的字体大小为10px,然后1em就是10px,有利于换算

    body{ font-size:62.5%;} //换算一下10px*100%/16px=62.5%===》》相当于10px,1em=10px
    h1 {font-size:4em} //40px
    h6 {font-size:1.2em} //12px
  • 相关阅读:
    新增访客数量MR统计之NewInstallUserMapper相关准备
    新增访客数量MR统计之NewInstallUserMapper中维度信息准备
    编译器编译原理理解
    构造函数的理解和应用场景
    大小字节序的深入理解和鉴定系统字节序方法
    定义结构体和初始化的方法
    Source Insight 光标变粗设置NotePad++光标设置
    栈实现java
    快速排序java
    希尔排序java
  • 原文地址:https://www.cnblogs.com/qdlhj/p/10508998.html
Copyright © 2011-2022 走看看