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

现在大部分流行的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等浏览器不能正常解析的内容。这些都属于是前端范畴,对新手来说是不好搞,排查问题起来也可能比较复杂。如果不想折腾代码,保险一点的办法是把导航按钮数量控制一下,文字也不要太长

      回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注