<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.
你在css样式文件头部写上body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,textarea,p,blockquote,th,td,a
{
padding:
0margin:
0font-size:12px
text-decoration:none
font-family:
"微软雅黑"
,arial}
h1,h2,h3,h4,h5,h6
{font-weight:
normalfont-size:
100%}
这样所有的标签默认的内外边距都清零了,而且有默认字体大小和字体。然后如果你需要的话可有给指定h1标签设置字体大小或者其他样式,希望可以帮到你
为了实现ridio 选中ridio 样子自动变用了input:checked + .ridio {background-image:url(../img/radio1.png)}实现,但是后来发现:checked 选择器ie8以下不能识别,最近从一个大神那发现了了一个可以使ie8版本识别css3伪类和属性选择器selectivizr,地址为http://www.zhangxinxu.com/wordpress/2010/09/selectivizr-%E8%AE%A9ie6ie7ie8%E6%94%AF%E6%8C%81css3%E4%BC%AA%E7%B1%BB%E5%92%8C%E5%B1%9E%E6%80%A7%E9%80%89%E6%8B%A9%E5%99%A8/
实际使用时发现,ridio 选中样式不会随着点击选中而改变样子,看起来好像就没有什么作用。后来发现,原来在ie8下我的Input隐藏了display:none这种写法好像ie8默认不能点击,只能用filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0)来透明隐藏住按钮,但是input所占的空间还是存在的,这样看起来比较丑,但是目前也没啥比较好的解决方法,只想这个样式在ie8以下使用就好,ie9以上还是用display:none来实现。
问题来了,之前是:root来区分ie9的hack的,结果selectivizr支持了:root属性,只能换了另一种写法
[html] view plain copy
<span style="font-size:14px">.hide{filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0)}
@media all and (min-width:0) {
.hide{display:none}
}
</span>