<html>
<head>
<meta charset="UTF-8">
<title>Demo</title> <style type="text/css">
#box { font-size: 4vw}</style></head><body> <div id="box">
我是靖鸣君 我是靖鸣君 我是靖鸣君</div></body></html>
但是该方案存在一个bug,上面的代码,当浏览器窗口变化的时候,box中的文字并没有按照应有的比例变化,但是css3标准中是这么说的:
When the height or width of the viewport is changed, they are scaled accordingly.
可以使用”相对长度单位“ em ,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。所有浏览器支持
例如:
font-size:1em
1、标签比如是块状元素,并且有个确定的宽度,百分比的宽度也行;padding的话, 设置成auto它会自动继承浏览器的padding值,因为有些奇葩浏览器是默认有padding值的,为了避免这个对样式造成影响,样式开头一般会加上一句*{margin:0padding:0}。
2、自适应,一般是自适应屏幕大小,比如我们的电脑、手机都有很多不同尺寸的屏幕,那么做出来的页面就要兼容这种尺寸的变化,而不会让布局错乱。
3、一般PC端布局样式是用百分比,不过移动端的话,因为对css3的兼容性非常好,所有要达到自适应,可以用css3来布局,当然还有比较流行的响应式布局。
4、层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
5、CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。