响应式网站开发的干货

      前段时间因为公司有加拿大的业务所以做了一个网站，当时说希望是响应式的网站，后来自己也看了几个国外的网站真的发现人家的前端技术和前端思想真的是杠杠的，所以自己仿照的国外的网站做了一个响应式的网站，自己也在做网站的期间学习到了很多吧！

  1.meta标签的设置

   我们知道如果想要让你的网站的搜索率变高，想要适应不同屏幕的尺寸，meta部分时一定要设置的，屏幕不能随着手指的放大而放大，这是基本的所以需要把下面的标签写上去

<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

2.每次查询的使用

  这次项目虽然是建立到bootstrap但是我并没有用很多，用的大部分是媒体查询

 

@media(min-width:770px){
    #footer{position:fixed;}
}
@media(max-width:1200px){
    .m-part-two .m-p-con img{width: 100%;height: 100%;}
    .mp-th-con{width:50%;float:left;}
    #footer .footer-top .f-item{width:50%;}
	#main-anthor .faq-part-t .faq-con .tab-con .ft-con h1{cursor:pointer;font-size:14px;color:#333;line-height:60px;height:60px;width:98%;background:url("../images/faqjia.png") right center no-repeat;margin:0px;margin-top:15px;}
}
@media(max-width:768px){
    .mp-th-con{width: 50%;float:left;}
    .m-part-three .mp-th-con{height:400px;}
    .m-part-three .mp-th-con .mt-c-cir{padding-top:150px;}
    .m-part-four .mp-f-tit .te-title{font-size:28px;}
    #footer .footer-top .f-item{width:50%;float:left;}
    #marqueeTea ul li{width:370px;}
    /* #footer .footer-top{} */
    #main-anthor .faq-part-t .faq-con .tab-con .ft-con h1{cursor:pointer;font-size:14px;color:#333;line-height:35px;height:60px;width:98%;background:url("../images/faqjia.png") right center no-repeat;margin:0px;margin-top:15px;}
    #main-anthor .faq-part-t .faq-con .tab-con .ft-con .ft-c-d{display:none;width:98%;font-size:12px;color:#666666;line-height:20px;}
    .ma-part-t .mat-item{float:left;width:49%;}
    #main-anthor .principal .pr-item .pr-avator{margin:0 auto;width:208px;height:208px;padding:6px;border:1px solid #e7e7e7;border-radius:50%;}
    #main-anthor .principal .pr-item .pr-avator img{border-radius:50%;background-color:#ededed;width:196px;height:196px;;}
}
@media(max-width:480px){
	#footer .footer-top .f-item{width:100%;}
    .ma-part-t .mat-item{width:100%;}
    .mp-th-con{width:100%;float:left;}
    .ch-part-t .chp-t-title{font-size:20px;color:#333333;}
    .m-part-three .mp-th-con{height:350px;}
    .m-part-three .mp-th-con .mt-c-cir{padding-top:110px;}
    .m-part-four .mp-f-tit .te-title{font-size:20px;}
    .m-part-four .mp-f-tit .te-togg{padding-top:0px;}
    .about-part-t .ab-item .ab-form .username{width:100%;}
    .about-part-t .ab-item .ab-form .e-mail{width:100%;}
    #main-anthor .faq-part-t .faq-con .tab-con .ft-con h1{cursor:pointer;font-size:12px;color:#333;line-height:20px;height:60px;width:98%;background:url("../images/faqjia.png") right center no-repeat;margin:0px;margin-top:15px;}
    .ch-part-t .chp-table .row:nth-child(4) >div:nth-child(2) >div:nth-child(1){line-height:15px;}
    /* .ch-part-t .chp-table .row:nth-child(5) > div:nth-child(2) > div:nth-child(1) >div:nth-child(1){height:119px;border-left:none;border-top:none;border-right:none;line-height:50px;padding:0;text-align:center;} */
    .ch-part-t .chp-table .row  div{border:1px solid #dadada;font-size:10px;color:#666;padding:0;text-align:center;}
    .ch-part-t .chp-table .row:nth-child(5) > div:nth-child(3) > div:nth-child(2){line-height:15px;}
    .ch-part-t .chp-table .row:nth-child(5) > div:nth-child(3) > div:nth-child(3){line-height:15px;}
    .ch-part-t .chp-table .row:nth-child(5) > div:nth-child(2) > div:nth-child(2) >div:nth-child(2) div:nth-child(2){line-height:15px;}
    .ch-part-t .chp-table .row:nth-child(5) > div:nth-child(3) > div:nth-child(5){line-height:15px;}
    .ch-part-t .chp-table .row:nth-child(5) > div:nth-child(3) > div:nth-child(6){line-height:15px;}
    #main-anthor .process .pro-con .pro-first{padding:0px;width:100%;}
    #main-anthor .process .pro-con .pro-second{padding:0px;width:100%;}
    #main-anthor .process .pro-con .pro-third{padding:0px;width:100%;}
    #main-anthor .process .pro-con .pro-four{padding:0px;width:100%;}
    #main-anthor .process .pro-con .pro-five{padding:0px;width:100%;}
    #main-anthor .process .pro-con .pro-first h1{width:100%;height:60px;line-height:60px;margin-bottom:5px;padding-left:60px;background:url("../images/pro-1.png") 0px 0px no-repeat;font-size:14px;color:#333;}
    #main-anthor .process .pro-con .pro-second h1{width:100%;height:60px;line-height:60px;margin-bottom:5px;padding-left:60px;background:url("../images/pro-2.png") 0px 0px no-repeat;font-size:14px;color:#333;margin-top:5px;}
    #main-anthor .process .pro-con .pro-third h1{width:100%;height:60px;line-height:60px;margin-bottom:5px;padding-left:60px;background:url("../images/pro-3.png") 0px 0px no-repeat;font-size:14px;color:#333;margin-top:5px;}
    #main-anthor .process .pro-con .pro-four h1{width:100%;height:60px;line-height:60px;margin-bottom:5px;padding-left:60px;background:url("../images/pro-4.png") 0px 0px no-repeat;font-size:14px;color:#333;margin-top:5px;}
    #main-anthor .process .pro-con .pro-five h1{width:100%;height:60px;line-height:60px;margin-bottom:5px;padding-left:60px;background:url("../images/pro-5.png") 0px 0px no-repeat;font-size:14px;color:#333;margin-top:5px;}

    #main-anthor .process .pro-con .pro-first .pro-de p{padding-left:70px;font-size:12px;color:#666666;line-height:20px;}
    #main-anthor .process .pro-con .pro-second .pro-de p{padding-left:70px;font-size:12px;color:#666666;line-height:20px;}
    #main-anthor .process .pro-con .pro-third .pro-de p{padding-left:70px;font-size:12px;color:#666666;line-height:20px;}
    #main-anthor .process .pro-con .pro-four .pro-de p{padding-left:70px;font-size:12px;color:#666666;line-height:20px;}
    #main-anthor .process .pro-con .pro-five .pro-de p{padding-left:70px;font-size:12px;color:#666666;line-height:20px;}
	#main-anthor .faq-part-t .faq-con .tab-con .ft-con .ft-c-d .row div{border:1px solid #dadada;font-size:12px;color:#666;padding:0px;text-align: center;line-height:20px;}



}

3.栅格布局

  bootstrap这部分真的很好用不过也可以自己写一个类似于栅格布局的css代码段，本人涉及到的表格神马的都是用的这个布局本人感觉很好用

     做完这个网站的感受其中也包括项目紧，加班加点的自己挣得很疲惫，如果改变不了别人就得改变自己，想想自己还有很多东西没有学习，继续努力吧！