网页手机端的设置

一、媒体适应终端。在style.css文件中编写以下代码

/*媒体属性适应终端*/
@media screen and (max-width:768px){}

@media screen and (max-width:480px){}

@media screen and (max-width:320px){}

二、不同终端的页面设置。去掉电脑端的侧边栏。

#primary.sidebar-left #sidebar {
    /*padding:0;
    clear:both;*/
    display:none;
}

其他的设置如时间线等

/* Timeline */
#timeline:before {
    left: 12px;
    margin-left: 0;
    /*display:none;隐藏时间线*/
}
#timeline > li {
    padding:0 0 0 37px !important;/*文章边框大小*/
}
#timeline > li .hentry:before {
    left: -32px !important;
    /*display:none;隐藏时间线上的点*/
}

三、不同终端的菜单栏设置。

 #logo{
    float:left;
    width:80%; 
    height:117px;
}
#nav-primary-mobile{
    position:relative;
    display:block;
    width:20%;
    height:117px;/*logo的高度为120px,保证高度一致*/
    margin:0;
    float:right;
}
#header-bottom{
    clear:both;
}/*因为logo和nav浮动，导致该div被压住，所以清除浮动的影响*/
#nav-primary-mobile .menu-toggle{
    padding:55px 20px;
    height:117px;
}
#nav-primary-mobile ul{
    position:relative;/*让ul为相对定位，可以设置层级，避免被压住。*/
    z-index:999;
}
#nav-primary-mobile ul li a:hover{
    color:#FCEABD;
}

#nav-primary-mobile {
    display:block;    
}

@media screen and (max-width:690px){
#nav-primary-mobile .menu-toggle span {
    display:none;
}
#nav-primary-mobile .menu-toggle .fa{
    font-size:1.5em;
    margin:0;
}
#nav-primary-mobile .menu-toggle{
    padding:50px 20px;
}
}

@media screen and (max-width:600px){
#nav-primary-mobile{
    position:relative;
}
#nav-primary-mobile ul{
    position:absolute;
    width:120px;
    top:117px;
    right:0;
}
}