现在大部分流行的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。百度和各类采集站皆不可信,搜索请谨慎鉴别。技术类文章一般都有时效性,本人习惯不定期对自己的博文进行修正和更新,因此请访问出处以查看本文的最新版本。
您也可以扫描左边的二维码,关注我们的微信公众号,在微信上查看我们的案例。
你好,我是wordpress小白,请教个问题。我用的是Twenty Twelve主题,导航菜单栏在ie10显示正常只有一行 ,可是在遨游,uc浏览器却变成两行,请问怎么修改导航菜单栏的左右间距。
这种情况有多种可能也许你的遨游UC浏览器版本比较老,没有加载ie10内正常加载的字体,因为字体不同,导航占据的宽度也不同;也有可能是CSS或者JS里面有UC等浏览器不能正常解析的内容。这些都属于是前端范畴,对新手来说是不好搞,排查问题起来也可能比较复杂。如果不想折腾代码,保险一点的办法是把导航按钮数量控制一下,文字也不要太长
同问此问题,间距实在是太大了,另外,列表页的间距也很大,怎么调整呢》?