WordPress自带主题twentytwelve的CSS学习笔记

| 3 条评论 | 11,929 人已阅
本站所有文章均为博主人工写作，绝无AI辅助成分，请放心参阅。

现在大部分流行的WP主题都采用了响应式设计（Responsive Web Design），我的博客主题修改自twentytwelve – WP自带的的一个轻量级主题，个人认为它的样式表写法在兼容性上已经做得很好了。今天就来提炼一下其中的精华，也包括一些不太常见的CSS条目。

首先是全局的字体设置，这个主题引入了现在很流行的rem单位，它在body上定义了font-size:100%，因此后面全部的尺寸换算方法基数就是这两个：
$rembase: 14;
$line-height: 24;
摘要一些例子：

1
2
3
4
5

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，这个不必多说，但在里面发现一条没见过的：

1

img {-ms-interpolation-mode: bicubic;}

查了下这个图片的IE专有属性-ms-interpolation-mode 作用是在IE中给图片缩放规定一个算法，bicubic可以让那个图片缩放相对不显得锯齿化，记得在IE6/7中图片缩放时失真是很严重的，看来这个是专门针对老版本的IE的。在IE9+中就算没有这条，也已经没有见到图片缩放失真了。

1

html {-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} /*这个应该是让用户浏览器能调整字体大小*/
1

a:focus { outline: thin dotted; } /*链接上焦点时候一圈虚线，这个很少有人注意到要定义*/

这个比较有意思：

1
2
3
4
5
6
7

/* Sidebar */
.widget-area .widget {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	word-wrap: break-word;
}

hyphens是一个CSS3的属性，具体介绍点这里。
在html标签定义了lang属性的时候，比如：

1

<html lang="zh-CN">

这个时候CSS中的hyphens会发生对应语种的换行作用，在长单词的时候会添加“-”，这比简单粗暴的CSS2属性word-wrap要来的有效。不过这个属性现在浏览器支持率还不太高，FF支持，Chrome不支持，IE从10开始支持了一部分。

接下来都是一些寻常的…
一直到响应式布局：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

@-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的页头
响应式布局必加的一行：

1

<meta name="viewport" content="width=device-width">

单独为IE7和8增加了一些样式，定义在css/ie.css中，这样可以不用或少用CSS Hack：

1
2
3
4
5
6
7
8
9

<!--[if IE 7]>
<html class="ie ie7" lang="zh-CN">
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" lang="zh-CN">
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html lang="zh-CN">
<!--<![endif]-->
1

.site .screen-reader-text {clip: rect(1px 1px 1px 1px); /* IE7 */}

这个是旧版本的IE对clip属性的写法，而标准写法在style.css中，应该是

1

.site .screen-reader-text {clip: rect(1px, 1px, 1px, 1px);}

最后是导航中的经典浮动问题:

1
2
3
4

.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 */

本站所有文章均为原创，欢迎转载，请注明文章出处：https://blog.brain1981.com/229.html。百度和各类采集站皆不可信，搜索请谨慎鉴别。技术类文章一般都有时效性，本人习惯不定期对自己的博文进行修正和更新，因此请访问出处以查看本文的最新版本。

关注我们的微信公众号-JennyStudio 本站记录了近几年的工作中遇到的一些技术问题和解决过程，“作品集”还收录了本人的大部分作品展示。除了本博客外，我们的工作室网站 – JennyStudio，内有更多作品回顾和展示。
您也可以扫描左边的二维码，关注我们的微信公众号，在微信上查看我们的案例。

相关文章

3 关于 “WordPress自带主题twentytwelve的CSS学习笔记” 的评论

  1. Kinson.Lee

    你好，我是wordpress小白，请教个问题。我用的是Twenty Twelve主题，导航菜单栏在ie10显示正常只有一行 ，可是在遨游，uc浏览器却变成两行，请问怎么修改导航菜单栏的左右间距。

    回复 ↓
    1. Brain 文章作者

      这种情况有多种可能也许你的遨游UC浏览器版本比较老，没有加载ie10内正常加载的字体，因为字体不同，导航占据的宽度也不同；也有可能是CSS或者JS里面有UC等浏览器不能正常解析的内容。这些都属于是前端范畴，对新手来说是不好搞，排查问题起来也可能比较复杂。如果不想折腾代码，保险一点的办法是把导航按钮数量控制一下，文字也不要太长

      回复 ↓

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注