最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS3 流式排版（使用em设置文字大小，以及外边距、内边距）
时间：2016-01-07 编辑：简简单单 来源：一聚教程网
过去我们常用“硬编码”的字号（使用像素单位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之后，这些细节所占用的空间都会根据文字大小而缩放。
比如下面样例：左右两栏都是两个
嵌套的布局，内部的
用于为当前栏内容周围添加空白，这样不会影响整体两栏布局的等比缩放。
111com.net
left
欢迎访问111com.net
right
欢迎访问111com.net
相关文章
- CSS 鼠标点击拖拽效果代码展示 10-31
- CSS使用SVG实现动态分布的圆环发散路径动画教程 10-31
- css3中仿放大镜效果的几种方式原理介绍 10-26
- CSS3切割轮播图的代码展示 10-26
- CSS组合选择器解析 10-26
- css带搜索导航栏的代码展示 10-26
热门栏目
-
php教程
php入门 php安全 php安装 php常用代码 php高级应用 -
asp.net教程
基础入门 .Net开发 C语言 VB.Net语言 WebService -
手机开发
安卓教程 ios7教程 Windows Phone Windows Mobile 手机常见问题 -
css教程
CSS入门 常用代码 经典案例 样式布局 高级应用 -
网页制作
设计基础 Dreamweaver Frontpage js教程 XNL/XSLT -
办公数码
word excel powerpoint 金山WPS 电脑新手 -
jsp教程
Application与Applet J2EE/EJB/服务器 J2ME开发 Java基础 Java技巧及代码