折腾日记-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才行，原因是什么也没有深究。