css布局中的百分比布局

最新推荐文章于 2023-10-25 10:00:41 发布

weixin_30567225

最新推荐文章于 2023-10-25 10:00:41 发布

阅读量277

点赞数

原文链接：http://www.cnblogs.com/qdlhj/p/10508998.html

版权

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

转载于:https://www.cnblogs.com/qdlhj/p/10508998.html

weixin_30567225

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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=16pxCSS3新增的一个...
复制链接

扫一扫