折腾日记-wordpress

今天把 wordpress 的文章背景图片和内容位置布局，折腾了一下。
记录一下 css

header.entry-header h1 {font-size:50px!important;}
 @media only screen and (max-width: 1070px){
         main#main article{margin-top:200px;}
 }
 @media only screen and (min-width: 1070px){
     header.entry-header{border-bottom:0px!important;}
/* 分类标题颜色 */ 
.page-title{color:#fff;}
.archive-description{color:#fff;}
/* 文章标题颜色 */
 .entry-header h1{color:#fff;}
     main#main article{margin-top:140px;}
 div.entry-content{margin-top:140px;}
 }

大致就是，在 1070px，标题刚好快换行的时候，改变字体的颜色，增加文章区域的 margin-top。

关于 1070 是怎么测出来的，在网上查了下测定窗口大小的方法，是主要用到的有 3 个，但前 2 个是固定的，不随着窗口的拉伸而改变，关键是最后一个 window.innerWidth。在 console 下输入，就得到了窗口像素大小

屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
获取窗口宽度：window.innerWidth

遇到的一个坑就是，在 wordpess 自定义的 css 里面，font-size、border 对 header、h1 的定义是无法生效的，必须加 !important 才行，原因是什么也没有深究。