封面禁止套娃！

由于2014主题原本的布局仅有1260px，显得非常拥挤，域主考虑到本站的访客几乎都是大屏的PC用户（上至27寸显示器、下至15寸游戏本……），所以进一步拉宽了网站的布局，得以完美覆盖人眼的60°锐角视野范围~

目前1080P及以上分辨率的显示器几乎普及了，从游戏本的15.6寸到24寸乃至27寸4K显示器。需要注意的是，1080P的笔记本屏幕一般会以125%的缩放比例显示，此时逻辑分辨率实为等效1536×864（接近1600×900，但是细节更清晰）

同理还有那些4K的显示器，经过200%或150%缩放，一般等效1080P或者2560×1440的空间。

我分别在宽度1008px和1681px处设置了响应断点，这样显示器分辨率高于1680×1050时会加宽内容区域，文字的显示不会再那么拥挤了。

@media screen and (min-width: 1008px){

.site {
margin: 0 auto;
max-width: 1280px;
position: relative;
}

.site-header {

max-width: 100%;
position: relative;
width: 100%;
z-index: 4;
}

.archive-header, .comments-area, .image-navigation, .page-header, .page-content, .post-navigation, .site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .site-content footer.entry-meta {
padding-right: 40px;
padding-left: 40px;
margin-right:auto;
margin-bottom:20px;
}


article.hentry {
max-width:100%!important;
}
.site-content {
margin-right: 340px;
}
.content-sidebar {
margin-left: -340px;
max-width: 340px!important;
}
.site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .site-content .entry-meta, .page-content {
margin: 0 auto;
max-width: 500px;
padding-top:6px;
padding-bottom:6px;
}
}



@media screen and (min-width: 1681px){
.site {
margin: 0 auto;
max-width: 1400px;
position: relative;
}


.site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .site-content .entry-meta, .page-content {
margin: 0 auto;
max-width: 580px;
padding-top:12px;
}
}

修改完布局的CSS以后，还需要修改function.php中132行的缩略图分辨率并刷新缓存，因为缩略图的大小不归CSS管……当然可以直接粗暴地删掉，不过加载的速度就慢了很多……以下是post-thumbnail对应的分辨率代码

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 1038, 576, true );
add_image_size( 'twentyfourteen-full-width', 1038, 576, true );

另外需要安装一个刷新缩略图缓存的插件，否则主题的img仍然是原本的宽度，推荐使用reGenerate Thumbnails Advanced

实际效果：

在保持侧边栏区域不变，按比例放大内容区域的情况下，可以从标题中的AJAX文字换行看到明显的加宽效果。

来源