JDX-01練習說明:網站設計整合

(六)針對RWD畫面調整

(A)Section02設計

(1)RWD之下Veiwport 行動裝置顯示設定

本網參考

<meta name="viewport" content="width=device-width, initial-scale=1.0">

(2)@media queries媒體類型查詢設定

本網參考

/*section1 當低於三張照片併排照片的寬度380*2 +480 =1240 則中間照片消失*/
@media  (max-width:1200px){
    section:nth-of-type(1) div{height: auto;flex-direction:row;
                                max-width:1100px; margin:auto;}
    section:nth-of-type(1) img:nth-child(3){display: none;}
}

(B)nav區設定

(1) html結構確認

(2)CSS美化

.navbtn,.navClosebtn { display: none;}

@media  (max-width:1200px){
	body{min-width: 400px;}
	.navbtn{display: block;	position: absolute;	top: 0;	left: 0;
		    width: 50px; height: 50px;
		    background: transparent; border: none; color: #000;
		    cursor: pointer;
	}

	nav{background:rgba(0, 0, 0,0.6); 
        position: fixed; width: 100%;
        top: 0; bottom: 0;left: 0; right: 0;
        z-index: 999; padding-top: 50px;
        display: none;
	}
    
  	nav a{ color: #fff;  padding:5px; line-height: 50px; text-align: center;
                display: block; transition: all 1s;}
	nav a:hover{ border-bottom: none; background: #ffecb3; color: #000; }
	.navClosebtn{position: absolute; top: 5px; right: 5px;
		        width: 40px; height: 40px; display: block; 
                cursor: pointer;
    }
  	#social { display: none;}
}

(3)jQuery

$('.navbtn, .navClosebtn').click(function(){
	$('nav').slideToggle();
});