简单的响应式布局

参照《宁浩网视频》

一：媒体类型

screen（屏幕），print（打印机）

二：操作符：

1. and操作符 连接不同的媒体查询，使媒体查询更加复杂化
   @media screen and (min-width: 480px) and (max-width: 767px){
   body{
   background: #27ae60;
   }
   }
   操作的设备是屏幕，并且可视区的宽度在480到767之间时，屏幕变为绿色
2. or操作符
   @media screen and ( orientation : landscape), screen and (min-width : 320px){
   body{
   background: #ef0089;
   }
   }
3. not操作符
   @media not screen and ( orientation : landscape){
   body{
   background: #ef0089;
   }
   }

not操作符后面必须紧跟着媒体的类型，比如screen或者print，如果没有设备类型，将永远返回假
only操作符后面也必须跟着媒体的类型
not操作符会否定所有的操作，后面所有的条件得出的结果如果是真，整个返回的就是假

三：一些概念

1. device-aspect-ratio是设备的宽高比例
2. sapect-ratio是可视区的宽高比例
3. resolution设备的像素密度
   @media screen and ( max-resolution : 1dppx ), screen and ( -webkit-device-pixel-ratio : 1){
   body{
   background: #c039b2;
   }
   }
   如果操作的是屏幕，并且最大的像素密度是1dppx
4. orientation ： 判断设备的方向
   水平方向：landscape
   垂直方向：portrait
5. media queries : 当页面的宽度达到设置的值时，就运用某个样式的操作

四：一个小实例

html部分

页头

导航

主体

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sem erat, egestas quis luctus ut, rhoncus vitae risus. Integer venenatis libero sit amet sapien dictum, quis bibendum mi volutpat. Cras pretium quam quis magna facilisis, eget feugiat nisi lacinia.

边栏

Donec dolor arcu, interdum sed turpis faucibus, placerat ultricies felis. Donec pulvinar gravida rhoncus. Suspendisse vestibulum est eget dolor lobortis.

页脚

css部分
body{
margin-top: 35px;
text-align: center;
}
h3,p{
padding: 20px;
}
.container{
width: 960px;
margin: 0 auto;
}
#header, #navigation, #footer, #mainbody, #sidebar{
height: 100px;
line-height: 25px;
background: #eee;
margin-bottom: 20px;
}
#mainbody,#sidebar{
height: 300px;
float: left;
}
#mainbody{
width: 620px;
margin-right: 20px;
background: #ddefcb;
}
#sidebar{
width: 320px;
background: #ffcbdd;
}
#footer{
clear: both;
}
@media (min-width: 1200px) {
.container{
width: 1170px;
}
#mainbody{
width: 770px;
margin-right: 30px;
}
#sidebar{
width: 370px;
}
}
@media (max-width: 959px){ /当width变为百分比，布局就会变成流动的布局/
.container{
width: 100%;
}
#mainbody{
width: 67%;
}
#sidebar{
width: 30%;
float: right;
}
}
@media (max-width: 767px){
#mainbody, #sidebar{
float: none;
width: 100%;
}
}
第二个实例：HTML部分

Nacigation

Responsive Toggle Navigation

• 项目 1


• 项目 2


• 项目 3


• 项目 4


• 项目 5

            

            

                
主体
                
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sem erat, egestas quis luctus ut, rhoncus vitae risus. Integer venenatis libero sit amet sapien dictum, quis bibendum mi volutpat. Cras pretium quam quis magna facilisis, eget feugiat nisi lacinia.
            
            
                
边栏
                
Donec dolor arcu, interdum sed turpis faucibus, placerat ultricies felis. Donec pulvinar gravida rhoncus. 
            
        

© Copyright Ninghao.net

css部分
body{
margin-top: 35px;
text-align: center;
margin: 0;
padding: 0;
}
ul, ol{
padding: 0;
list-style: none;
}
h3, p{
padding: 20px;
}
img{
width: 100%;
/max-width防止图片被拉伸/
max-width: 100%;
}

    /*#showcase{
      background-image: url(../img/01.jpg);
      background-position: 50% 50%;
      background-repeat: no-repeat; 
      响应式很重要的一点：background-size: 100%;
      -webkit-background-size: 100%;
      cover的意思是，即使不是所有的都是56%，别的图像照样可以填满整个区域
      background-size: cover;
      margin-top: 20px;
      经过计算得到的值，使得可视区无论怎么变化都不会留下空白
      padding-top: 56%;
      width:500px; 这样缩小可视区，图像的上下就会留下很大的空白
    }
    */
    .container{
        widows: 960px;
        margin: 0 auto;
    }
    #header, #nav, #footer, #mainbody, #sidebar{
        line-height: 25px;
        background: #eee;
        margin-bottom: 20px;
        padding-bottom: 20px;
        color: #999;
    }
    #mainbody, #sidebar{
        height: 300px;
        float: left;
        margin-bottom: 35px;
    }
    #mainbody{
        width: 620px;
        margin-right: 20px;
    }
    #sidebar{
        width: 320px;
    }
    #footer{
        clear: both;
    }
    #footer h5{
        padding-top: 20px;
    }
    #footer{
        background: none;
        border-top: 1px solid #eee;
    }
    #header{
        background: none;
        border-bottom: 1px solid #eee;
    }
    #heaader h1{
        font-size: 2.5em;
        margin-top: 50px;
        color: #3c3c3c;
    }
    #header h2{
        font-size: 1em;
        color: #ccc
    }

    /*导航菜单*/
    ul{
        list-style: none;
        padding: 0;
    }
    #nav li, #nav li a{
        display: inline-block;
        padding: 7px 15px;
        text-decoration: none;
        color: #3b3b3b;
    }
    #nav li a:hover{
        background: #eee;
    }
    #nav{
        background: none;
      z-index:9999;
    }
    #nav .active{
        background: #eee;
    }
    .toggle-btn{
        display: none;
    }

    /*swipe幻灯片*/
    .swipe {
      overflow: hidden;
      visibility: hidden;
      position: relative;
    }
    .swipe-wrap {
      overflow: hidden;
      position: relative;
    }
    .swipe-wrap > div {
      float:left;
      width:100%;
      position: relative;
    }

    .slider-control .left{
      position: absolute;
      left: 30px;
      top: 45%;
    }
    .slider-control .right{
      position: absolute;
      right: 30px;
      top: 45%;
    }
    .slider-control button{
      width: 50px;
      height: 50px;
      font-size: 20px;
      cursor: pointer;
      background: #000;
      color: #fff;
      border: 3px solid #fff;
      border-radius: 50%;
      opacity: 0.7;
      display: none;
    }
    .swipe:hover button{
      display: block;
    }
    .silder-control button:hover{
      opacity: 0.5;
    }

    @media(min-width: 1200px){
        .container{
            width: 1170px;
        }
        #mainbody{
            width: 770px;
            margin-right: 30px;
        }
        #sidebar{
            width: 370px;
        }
    }
    @media(max-width: 959px){
        .container{
            width: 100%;
        }
        #mainbody{
            width: 67%;
        }
        #sidebar{
            width: 30%;
            float: right;
        }
    }
    @media(max-width: 767px){
        #mainbody, #sidebar{
            width: 100%;
            float: none;
        }
        #header{
            font-size: 12px;
            text-align: left;
            padding-left: 20px;
        }
        /*按钮切换*/
        .toggle-btn{
            display: inline-block;
            font-size: 25px;
            text-decoration: none;
            background: #000;
            color: #fff;
            padding: 7px 10px;
            position: absolute;
            right: 10px;
            top: 50px;
        }
        /*隐藏关闭按钮*/
        #nav .close{
            display: none;
        }
        /*导航为目标状态的桑畅显示关闭按钮*/
        #nav:target .close{
            display: inline-block;
        }
        /*初始时隐藏导航*/
        #nav{
            display: none;
        }
        /*导航为目标状态时的样式*/
        #nav:target{
            display: block;
            position: absolute;
            top: 0;
            padding-top: 70px;
            width: 100%;
        }
        /*目标状态下的导航的ul标签*/
        #nav:target ul{
            background: #000;
        }
      /* 目标状态下的导航的 li 与 a */
      #nav:target li, #nav:target li a{
        display: block;
        color: #eee;
        text-align: left;
      }
        /*目标状态下的导航的列表下的a标签的悬停样式*/
        #nav:target li a:hover{
            background: #3b3b3b;
        }
        /*目标状态下导航的激活状态的样式*/
        #nav:target .active{
            background: #272727;
        }
    }
    /*
    @media(max-width: 480px){
      #showcase{
        background-image: url(../img/01_s.jpg);
      }
    }

    @media(max-width: 480px) and (min-resolution : 2dppx), (max-width: 480px) and (-webkit-min-device-pixel-ratio : 2){
      #showcase{
        background-image: url(../img/01_s_2x.jpg);
      }
    }

    */
    /*当可视区变小时，用像素低的图片*/