css3 动画_CSS3 流式排版(使用em设置文字大小,以及外边距、内边距)

更新时间:2020-04-02    来源:显示器    手机版     字体:

【www.bbyears.com--显示器】

过去我们常用“硬编码”的字号(使用像素单位px)来设置文字的大小,但这种方式可能造成在大显示器上看着舒服的文字,到了移动设备的小屏幕上就会变得难以辨认。

1,使用em设置文字大小

百分比和em的结果相同,都是让文字相对于浏览器默认的文字大小缩放。比如:把文字大小设成110%或1.1em,结果就是比常规没有应用样式的文字大10%。

通常实现响应式布局的做法是:把页面的基准文字设置为100%,然后在其他元素中再用em单位放大或缩小文字。

body{
    font-size: 100%;
}
 
p {
    font-size: 0.9em;
}
 
h1 {
    font-size: 2em;
}

2,使用em设置外边距、内边距

除了文字使用em,布局中的边框、外边距、内边距也最好用em而不是像素。使用em之后,这些细节所占用的空间都会根据文字大小而缩放。
比如下面样例:左右两栏都是两个嵌套的布局,内部的用于为当前栏内容周围添加空白,这样不会影响整体两栏布局的等比缩放。

原文:CSS3 - 流式排版(使用em设置文字大小,以及外边距、内边距)


   
   
    111cn.net
   


   
       
           

left


           

欢迎访问111cn.net


              
   
   
       
           

right


           

欢迎访问111cn.net


       
   

本文来源:http://www.bbyears.com/bangongshuma/91471.html

热门标签

更多>>

本类排行