css: RWD 響應式網頁設計
RWD = Responsive Wed Design 響應式網頁設計
讓同一網站在電腦/平板/手機上都有較佳的可讀性。
目錄:
Media Query 媒體查詢
設定break point 中斷點
@media (min-width: 768px) and (max-width: 1000px) {
/*電腦螢幕視窗從滿版到縮小時，只要在768-1000px寬度之間，css寬度設定改為%比例*/
/* 只要在此寬度間距，css寬度設定改為% */
/*1. aside的間距也要顯示出來*/
.container {
background-color: pink;
width: 94%;
margin-left: auto;
margin-right: auto;
}
/*2. 調整article與aside的比例從8:2變為7:3*/
article {width: 69%;}
aside {width: 30%;}
}
@media (max-width: 767px){ /*手機螢幕最大寬度*/
/*1. 兩欄位分別設定為滿版*/
article {width: 100%;}
aside {width: 100%;}
/*2. 滿版時，用margin-bottom將兩欄間距拉開*/
.container {
background-color: peru;
margin-bottom: 20px;
}
}