响应式布局练习

今天我稍微试了试响应式布局的操作方法来为iti做准备,于是就拿我的博客开刀了。
想了一想,这个博客的主题本身就是响应式的了,可以非常好的适应小屏幕,于是我就不再做小屏幕的响应了,于是我做了更大屏幕的响应。

级别[我做的]:800~1299,1300~1460,1461~1880,1881~+∞

由于只是练习,所以我就拿多说评论框做实验了。

目标:让多说评论框在宽度超过1300的屏幕上从文章底部跑到右边,文章靠到左边。
[请掠过代码先看下面]。

要注意的问题是,由于wp的页面种类是不止一个的,所以这些css不能直接写进style.css里,否则没有评论框的页面会变成整个页面靠左的情况。所以采用PHP先进行判断[参考]
判断有没有评论框其实是判断加载的是什么页面,比如归档页,首页,之类的页面是没有评论框的。
如果是没有评论框的页面,不做任何事情:

否则写入css规则到文档中

由于实际模版处理起来略复杂,为了让它看起来更好看些,所以还是稍微用到了些js。

效果图:
小屏幕[手机屏]

中型 800~1299

大版 1300~1460

更大版和超大版就不截图了,和大版差不多,只是大小不一样。





如文中无特殊说明,本站均使用以下协议:知识共享许可协议
知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。

本博客使用Disqus评论系统,如果看不到评论框,请尝试爬墙。