这篇文章将记录我在开发中遇到的css相关的问题奥!
1.css引入字体:
我已经下载好字体,并且放在了font目录下
@font-face {font-family: 'Agency'; /*字体名称*/src: url('../font/AgencyFB.ttf'); /*字体源文件*/}.list_num{font-family: 'Agency'; /*字体名称,就是上面定义的名称*/font-size: 20px;}
不同浏览器字体的格式有差别(这部分是我转载的,考虑到可能有同学会要适应浏览器)
字体后缀和浏览器有关，如下所示* .TTF或.OTF，适用于Firefox 3.5、Safari、Opera * .EOT，适用于Internet Explorer 4.0+ * .SVG，适用于Chrome、IPhone 比如:@font-face {font-family: 'HansHandItalic';src: url('fonts/hanshand-webfont.eot');src: url('fonts/hanshand-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/hanshand-webfont.woff') format('woff'),url('fonts/hanshand-webfont.ttf') format('truetype'),url('fonts/hanshand-webfont.svg#webfont34M5alKg') format('svg');font-weight: normal;font-style: normal;}
2.css根据屏幕分辨率设置不同宽度大小
@media screen and (min-width: 1402px){#container{width: 970px;}}/*默认 max:1401以下 min 1401px以上*/@media screen and (max-width: 1401px){#container{width: 970px;}}
语法:@media screen and (判断属性){ CSS样式选择器 }
注意: 1.max-width:1401px以下的 min-width:1402px 以上的 (这是我自己的理解)
2.如果要兼容IE9以下版本浏览器需要加入一个google的JS (亲测OK的)
<script src="/livingston-css3-mediaqueries-js/1.0.0/css3-mediaqueries.js"></script>
