響應式網站

響應式

　　　　響應式網站就是根據不一樣的屏幕寬度以最佳的顯示方式顯示出來，一般用媒體查詢@media來控制不一樣屏幕寬度段的顯示方式

　　　　　　①如今html 里加一個屏幕寬度=設備寬度的說明

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

　　　　　　② 在css樣式裏面

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

　　　　　　　　　　body{

　　　　　　　　　　　　background : red;

　　　　　　　　　　}

　　　　　　　　}

 

　　　　　　上面表示小於多少像素的時候進行處理

　　　　　　一種是小於多少像素並且大於多少像素執行處理

　　　　　　@media screen (max-width : 800px) and {min-width: 700px} {

　　　　　　　　　　body{

　　　　　　　　　　　　background : red;

　　　　　　　　　　}

　　　　　　}

 

　　　　　　就是經過@media獲取屏幕像素，指定小於或大於多少像素的時候處理一些效果或者是佈局

　　這樣就能夠在不一樣的設備上經過獲取不一樣設備的屏幕寬度來作相應的處理，達到多個設備不一樣的顯示

　　效果，達到更加好的用戶體驗。

 

　　　　　還有在作響應式的時候，在最外層的div加一個

　　　　　　　　width:50%;  min-width: 700px;

　　　　　在屏幕達到縮放的條件是後，會一會兒縮放，我的感受挺好，呵呵