相信这个功能是很多主题的一道坎，我看到很多大型门户网站都没有支持这个功能。为什么呢？因为麻烦。最传统的做法是把主题中的各个div的宽度用百分比规定，然后他会自动填满整个屏幕。但这样做你会遇到很多麻烦，比如需要自动设置宽度的元素过多，多到我们甚至无法对每一个自动宽度的元素进行设计。此外动态变化的宽度对主题美化是个灾难，毕竟现在的网页美化还是靠图片和html5实现。图片是无法自适应动态宽度的。最后，为什么大型门户网站不支持这种功能呢？据我观察，大型门户网站网页格局大都采用区块化设计。一个页面中有N个区块，每个区块中显示不同的内容。这一点和本主题的设计方式很像。如果要自适应浏览器宽度，那么是改变每个区块的宽度呢？还是改变一行中显示区块的数量呢？出于美学的考量，通常会选择后者，因为区块尺寸的变化会造成整个网页变的很难看。但实现每一行的区块数量随着浏览器尺寸变化，就会涉及到网页结构的动态调整，这很麻烦。

为什么说麻烦呢。就拿本主题为例，wordpress主题采用php编写。php作为服务器端的语言是无法获取本地浏览器宽度的。所以在获取本地浏览器宽度这种活通常都用JS完成，因为JS实在本地运行的语言。好了，按照这个逻辑的发展就是，我们能否在本地通过JS获取浏览器尺寸然后发送给服务器让服务器通过PHP做出调整呢？也许能，也许不能，我不知道，因为我不会。

在网上我们能找到php获取JS变量的最简单的方式通常如下

<script type=text/javascript>document.write(XXX)</script> 

这样做看似能行，但结果通常不是我想要的。这里我假设XXX的值是1。

<?php 
$a = " <script type=text/javascript>document.write(XXX)</script> " 
?> 

这样得到的$a会是什么？echo出来的话会显示1，但用var_dump你会发现是一个长字节数的string格式的1。为什么？因为$a本质上是被赋值了上面代买中双引号中的字符串。所以$a的字节长度是上面js代码的长度，格式是string。只不过在输出的时候js运行了，给了结果1。这意味着$a无法作为php变量参与计算，因为参与运算时$a会被当成一段文本，是string而且不能被转化为int或者bool。哪怕在使用php格式转换时，$a也是作为储存着js代码的文本，而那一串代码是无法转换成任何int或者bool的。所以这么做的结果是只我想要的1只能通过$a显示出来，不能干其他事情。

那该怎么办？实际上上述这种最简单的方法是没辙的。要想真正做到变量的传递只能增加过程。GET方法、session方法、ajax方法、cookie方法选择适合的就行。我没有一一尝试，这次主题更新采用的是cookie方法。

逻辑很简单，网页加载的时候获取浏览器宽度等控制参数，然后查找本地储存的cookie。如果没有，把控制参数储存进cookie然后自动刷新网页，此时cookie中已经了刷新前存储的控制参数，通过php直接调取改变网页结构。如果本地已经存储了cookie，则与获取的控制参数进行对比，不同的话就存储新的参数并自动刷新。如果相同就什么都不做。

这样做的结果是我想要的，本主题在窄屏的情况下，会显示两列日志。而在浏览器宽度尺寸超过某个值后，会显示三列日志。

主题上线以后我还在不断的完善它，毕竟在制作的时候不能跟原设计图100%一致。这次的更新主要就是针对和设计稿差别较大的侧边栏。因为sidebar内容本身是wordpress自动生成的，所以很难编辑html内容，以前最多是靠CSS来修改样式。这次要是尝试用JS来创建canvas并移动到sidebar里的固定位置，同时对sidebar的CSS做了大量修改。

最终虽然算是比较完美的实现了设计要求，但因为CSS订制的地方比较多，也导致这个主题和侧边栏插件的绑定非常紧密。以后如果需要修改侧边栏的插件的话，估计需要修改CSS的地方也不少。

后面这里我想着重说明一下本主题所用的canvas情况。在发布的时候就说明了，本主题是基于HTML5制作的，这里尤其体现在内容大量canvas的使用。出于降低网站加载速度的需求，凡是能用canvas自己绘制的地方都没有采用图片作为背景。而出于让canvas能够准确的进行绘制，所有canvas函数均采用window.onload调用。即整个页面加载完毕后，才会开始执行。而针对本主题，最大的加载内容无非就是page的背景图，那个确实没辙，又大又不能自己画。所以本主题在载入的时候，会被发现，很多地方先出现空白区域，等到背景大图加载完毕后，空白区域再出现绘制内容。这是JS函数逻辑导致的。

除此以外，对于很小的图片加载和canvas的绘制速度对比上，其实没有多大差别。那为什么一定要用canvas呢？其实主要还是考虑到如果用图片的话，一是图片数量比较多，二是JS的加载对网络的要求比图片还是小很多的。简单来说就是现在JS绘制文件总共也就30KB，只要这30KB的JS被加载主题的绝大部分背景就有了，而如果要让这30KB的代码换成对应的图片的话，体积可能远大于30KB。

最后要说的是，目前的主流浏览器均已经支持HTML5，所以本主题并没有制作兼容html4的内容。也没针对除chrome以外的浏览器进行兼容性调整，这些都是以后的工作了。

稍微花了点时间做了个简单设计，自己进行PSD TO DIV，目前算是2.0版本了。

2.0版本开启了html5+css3，摒弃了PSD中大量的图片素材，自己用canvas画。得益于在设计时就采用了大量线段的风格，使得能用canvas的地方很多。整个主题最大的部分应该就是背景了。同时，所有canvas在主题加载完毕后才会加载，所以要等背景加载完毕后才会显示全部图画。

目前还是有一些小BUG，还在修缮中。

原版wordpress在进入后台或者直接进入编辑页面时会载入非常缓慢，用chrome的开发者工具看network很容易发现是googleapis的jQuery-ui.css加载超时导致问题。国内对google的支持并不好，这点大家都知道。所以解决方案也很明确，就是替代出问题的

ajax.googleapis.com/ajax/libs/jqueryui/1.11.4
/themes/smoothness/jquery-ui.css

其中的1.11.4是版本号，以后可能会变。然后问题来了，翻遍wordpress都找不到上面那个地址。推测那个地址并不是直接饮用而是通过变量组成的，所以无法直接找到。不过在网上有另一个方案，修改wp-includes/functions.php。详细方法： https://www.cnblogs.com/ningmeng666/p/7324924.html

但我用起来存在问题，我先引用方法中的代码

function hc_cdn_callback($buffer) {returnstr_replace('ajax.googleapis.com/ajax/libs/jqueryui
/1.8.21/themes/smoothness/jquery-ui.css','cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css', $buffer); } 
function hc_buffer_start() { ob_start("hc_cdn_callback"); } 
function izt_buffer_end() { ob_end_flush(); } 
add_action('init', 'hc_buffer_start'); 
add_action('shutdown', 'hc_buffer_end'); 

用起来直接报错，找不到 hc_buffer_end 函数。多明显啊，上面定义的叫 izt_buffer_end 。我不知道作者是故意的还是怎么，这么明显的问题就直接放出来了。不过作者接介绍方法结尾的地方说上面代码可能需要修改，后面我发现需要修改的不止一个函数名。izt_buffer_end 和 hc_buffer_end 修改哪个都行，函数名要一致。然后会继续报notice。

PHP Notice:  ob_end_flush(): failed to delete and flush buffer. No buffer to delete or flush in 

如果你能够修改php.ini，我建议你直接关了notice提示。如果不能，目前来说我能做到的唯一方式是，把 add_action(‘shutdown’, ‘hc_buffer_end’); 删了或者注释掉。

最后谈一下遗留问题。首先上述方法的大概逻辑是，既然找不到那个要修改的直接网址，就等php运行后在网址生成时，在php缓存中拦截并修改它，然后输出。ob_start是开启缓存进行修改，ob_end_flush冲出修改的缓存内容并关闭。我奇怪的是，就算我把ob_end_flush删了，上述方法也是有效的（不知道是不是大家都是这样的）。也就是说，其实并不需要ob_end_flush来冲出缓存。所以上面的方法其实可以缩减一下。

 function hc_cdn_callback($buffer) {
     return str_replace('ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/smoothness/jquery-ui.css', 'cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css', $buffer);//主要是修改这行 
} 
function hc_buffer_start() { ob_start("hc_cdn_callback"); } 
add_action('init', 'hc_buffer_start'); 

暗之探求者完结。难以想象野村哲也在讲一个如此庞杂的故事。作为一个普通玩家正常通关的话游戏本身并没有什么难度，正如这个系列一贯风格。游戏本身的卖点除了迪士尼世界以外，还有多样的玩法，包括不同世界的游戏体验完全不一样。除了这个以外，作为一款RPG游戏，游戏剧情也就是讲故事的部分占比还是非常重要的。

这个系列的一贯风格其实都是这样的，迪士尼人物中会有几个与游戏主线剧情紧密相关。其他分部在各个世界的人物则贯彻了原先迪士尼动画的剧情，和游戏主线就没那么大关系了。所以王国之心3中，玩家的感受就是身负使命然后穿梭在各个世界体验不同的小剧情，并且在最后推动主线剧情的发展。所以无论怎么看，我想主线剧情其实都很重要。这个系列的玩家也会冲着主线剧情的发展而玩这个游戏。我要看看到底结局如何，类似这种想法会一直贯彻整个游戏，更何况本作还一部完结篇。

说到这里，我就想表达不满了。为什么野村哲也要这么做！用十多部作品来讲一个事？！这么做不是不行，事实上很多包括文学、影视等都会这么做。但这种做法对制作人对剧情的掌控水平有极高的要求。合金装备也是几部作品在讲一个故事，但小岛秀夫的掌控能力比野村要好一些，虽然剧情也很繁杂，但完全不至于像王国之心这样，连制作团队在做新作的时候都不得不翻找前作的文案来梳理剧情。更不用说玩家的感受了，我相信这个世界上能把王国之心的剧情从头顺到尾的王国之心系列玩家不多。

这次并不是把整个游戏全面感受都写出来，只是表达一下最令我感受到不适的地方。无论怎么样，本作还是非常优秀的，几口气打通后我觉得本作相当值票。

我不是很专业，这种情况大都发生在纯文本的部分。

具体的解释请参考
https://developer.mozilla.org/en-US/docs/Web/CSS/clear

clear属性只是在block元素是起作用，如果你把clear:both用在一个inline-block或inline元素上，clear:both是不会起任何作用的。

网上大都给了一个增加class的方法，还是比较麻烦。我找到一个99%完美的方法：

要clear的文本前面加个

<br clear=”all”/>

解决！