### CSS Responsive Web Design 先在 head 中加上 ```css= <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` * width=device-width 目前寬度 等於 設備寬度 適應各家裝置的大小 * initial-scale=1.0 預設螢幕寬度 100% (最小0.25，最大5) * maximum-scale=1.0 不讓使用者縮放，設一個scaling上限(最小0.25，最大5) * user-scalable=no 禁止user-scaling --- ### Grid-View Grid-view often has 12 columns, and has a total width of 100% ```css= {box-sizing: border-box;} ```  100% / 12 columns = 8.33%. --- ### Example ```css= .menu {width: 25%;float: left;} ``` A class for the 12 columns, class="col-" ```css= [class*="col-"] {float: left;padding: 15px;} .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} <div class="col-9"> <h1>The City</h1> ``` --- ### CSS Media Queries 方法一: 寫在style.css檔案中 ```css= @media screen and (max-width: 480px){ .class{color: #000;}} ``` 方法二:在 head 中插入外部連結 ```css= <link rel="stylesheet" media="screen and (max-width: 600px)" href="css/small.css" /> ``` --- ### CSS Media Queries應用 For mobile phones ```css= [class*="col-"] {width: 100%;} ``` For desktop: ```css= @media only screen and (min-width: 768px) { .col-1 {width: 8.33%;}.col-2 {width: 16.66%;} background-color: lightblue;} ``` --- ### Image、Video For tablets ```css= @media only screen and (min-width: 600px) { .col-s-1 {width: 8.33%;}.col-s-2 {width: 16.66%;} div.example {display: none;} ``` Image、Video ```css= img {width: 100%;height: auto;/*或者*/ max-width: 100%;height: 400px;} ``` ---