响应式布局练习

今天我稍微试了试响应式布局的操作方法来为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。

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

 

中型 800~1299

大版 1300~1460

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



本文发布于 https://luojia.me

本站文章未经文下加注授权不得拷贝发布。

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