WordPress自带主题twentytwelve的CSS属性介绍

美工学习 · 发表于 2023-12-1 11:05:35

亲注册登录道勤网-可以查看更多帖子内容哦！（包涵精彩图片、文字详情等）请您及时注册登录-www.daoqin.net

您需要登录才可以下载或查看，没有账号？立即注册

x

现在大部分流行的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：

<!--[if IE 7]>
<html class="ie ie7" lang="zh-CN">
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" lang="zh-CN">
<![endif]-->
<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 */

复制代码

这样就可以了

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！