响应式布局练习

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

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

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

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

<?php if(is_home()||is_category()||is_tag()||is_date()||is_year() ||is_month()||is_day()||is_time() ||is_archive()||is_search()||is_404()):?>
<?php else:?>
<style>
@media only screen and (min-width:800px) and (max-width:1299px) {
#page {
max-width: 1000px;
position: relative !important;
}
#colophon {
position:relative;
}
#ds-thread {
position: relative !important;
background-color: rgba(255, 255, 255, 0);
}
}
@media only screen and (min-width:1300px) and (max-width:1460px) {
#page {
max-width: 75%;
position: absolute !important;
width: 75%;
left: 0em;
}
#colophon {
position:relative;
}
#ds-thread {
position: fixed !important;
right: 0em;
top: 0em;
height: 100%;
width: 25%;
background-color: rgba(255, 255, 255, 0.8);
}
}
@media only screen and (min-width:1461px) and (max-width:1880px) {
#page {
max-width: 80%;
position: absolute !important;
width: 80%;
left: 0em;
}
#colophon {
position:relative;
}
#ds-thread {
position: fixed !important;
right: 0em;
top: 0em;
height: 100%;
width: 20%;
background-color: rgba(255, 255, 255, 0.8);
}
}
@media only screen and (min-width:1881px) {
#page {
max-width: 70%;
left: 0em;
position: absolute !important;
width: 70%;
}
#colophon {
position:relative;
}
#ds-thread {
position: fixed !important;
right: 0em;
top: 0em;
height: 100%;
width: 30%;
background-color: rgba(255, 255, 255, 0.8);
}
}

</style>
<?php endif;?>

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

<?php if(is_home()||is_category()||is_tag()||is_date()||is_year() ||is_month()||is_day()||is_time() ||is_archive()||is_search()||is_404()):?>

否则写入css规则到文档中

<?php else:?>
<style>
@media only screen and (min-width:800px) and (max-width:1299px) {
.....
}
@media only screen and (min-width:1300px) and (max-width:1460px) {
.....
}
@media only screen and (min-width:1461px) and (max-width:1880px) {
.....
}
@media only screen and (min-width:1881px) {
.....
}
</style>
<?php endif;?>

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

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