WordPress自带主题twentytwelve的CSS属性介绍
现在大部分流行的WP主题都采用了响应式设计（Responsive Web Design），很多轻量级博客主题，都是采用这样的设计形式来表现的；首先是全局的字体设置，这个主题引入了现在很流行的rem单位，它在body上定义了font-size:100%，因此后面全部的尺寸换算方法基数就是这两个：$rembase: 14;
$line-height: 24;
摘要一些例子：padding: 5px 0;
padding: 0.357142857rem 0; (5 / $rembase)
font-size: 16px;
font-size: 1.142857143rem; (16 / $rembase)
line-height: 1.5; ($line-height / 16)然后看CSS reset，这个不必多说，但在里面发现一条没见过的：img {-ms-interpolation-mode: bicubic;}查了下这个图片的IE专有属性-ms-interpolation-mode 作用是在IE中给图片缩放规定一个算法，bicubic可以让那个图片缩放相对不显得锯齿化，记得在IE6/7中图片缩放时失真是很严重的，看来这个是专门针对老版本的IE的。在IE9+中就算没有这条，也已经没有见到图片缩放失真了。html {-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} /*这个应该是让用户浏览器能调整字体大小*/a:focus { outline: thin dotted; } /*链接上焦点时候一圈虚线，这个很少有人注意到要定义*/这个比较有意思：/* Sidebar */
.widget-area .widget {
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
word-wrap: break-word;
}hyphens是一个CSS3的属性，具体介绍点这里。
在html标签定义了lang属性的时候，比如：<html lang="zh-CN">这个时候CSS中的hyphens会发生对应语种的换行作用，在长单词的时候会添加“-”，这比简单粗暴的CSS2属性word-wrap要来的有效。不过这个属性现在浏览器支持率还不太高，FF支持，Chrome不支持，IE从10开始支持了一部分。接下来都是一些寻常的…
一直到响应式布局：@-ms-viewport { width: device-width; }
@viewport { width: device-width; } /*让页面采用设备宽度*/
/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
.site {
max-width: 960px;
max-width: 68.571428571rem;
}
} /* 页面宽度大于600的时候给主体内容一个最大宽度960 */
/* Minimum width of 960 pixels. */
@media screen and (min-width: 960px) {
body { background-color: #e6e6e6; }
body .site {
padding: 0 40px;
padding: 0 2.857142857rem;
margin-top: 48px;
margin-top: 3.428571429rem;
margin-bottom: 48px;
margin-bottom: 3.428571429rem;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
} /* 页面大于960宽的时候，这个主题给页面四周都加了灰色的背景，内容区还是维持在960宽 */
/* =Print */
@media print { ... } /* 打印的样式 */接下来看HTML的页头
响应式布局必加的一行：<meta name="viewport" content="width=device-width">单独为IE7和8增加了一些样式，定义在css/ie.css中，这样可以不用或少用CSS Hack：<!-->
<html class="ie ie7" lang="zh-CN">
<!-->
<!-->
<html class="ie ie8" lang="zh-CN">
<!-->
<!--><!-->
<html lang="zh-CN">
<!--<!-->.site .screen-reader-text {clip: rect(1px 1px 1px 1px); /* IE7 */}这个是旧版本的IE对clip属性的写法，而标准写法在style.css中，应该是.site .screen-reader-text {clip: rect(1px, 1px, 1px, 1px);}最后是导航中的经典浮动问题:.main-navigation li a,
.main-navigation li {display: inline-block;}
.ie7 .main-navigation li a,
.ie7 .main-navigation li {display: inline;} /*在IE6，7中要重写一遍display:inline以激活inline-block，这个主题已经放弃IE6 */这样就可以了
页:
[1]