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