--- title: Sirla 手刻 RWD tags: course, rwd --- > 【目次】 > [TOC] > > Reference Website： > 1. [Responsive Web Design (RWD) 響應式網站開發教學與心得](http://sweeteason.pixnet.net/blog/post/42130394-responsive-web-design-%28rwd%29-%E9%9F%BF%E6%87%89%E5%BC%8F%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%E6%95%99%E5%AD%B8%E8%88%87) --- # Sirla 手刻 RWD ## 如何製作 RWD 網站? (必備四元素) ### 1. [Viewport](https://ithelp.ithome.com.tw/articles/10195279) * 使用meta標籤設定網頁寬度符合裝置大小 ```htmlmixed= <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- initial-scale=1.0 設定畫面的初始縮放比例為100% --> </head> ``` ### 2. Grid-View * [將一個頁面分成12等份，方便做版面規劃。]( https://www.w3schools.com/css/tryresponsive_grid.htm) ![](https://i.imgur.com/gvxoPLD.png) ### 3. 所有圖片按照螢幕寬度自動縮放 ```css= img { max-width: 100%; /* 不會縮放到 "大於"其原始大小 */ height: auto; /* 隨著寬度等比例縮放 */ } ``` ```htmlmixed= <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> #img1 { width: 100%; height: auto; } #img2 { max-width: 100%; height: auto; } </style> </head> <body> <img id="img1" src="img_chania.jpg" width="460" height="345"> <img id="img2" src="img_chania.jpg" width="460" height="345"> </body> </html> ``` ### 4. 給予個別device，個別的CSS規則 * Extra small devices (phones, 600px and down) ```@media only screen and (max-width: 600px) {...} ``` * Medium devices (tablets and large phones, 600px and up) ```@media only screen and (min-width: 600px) {...} ``` * Large devices (laptops/desktops, 992px and up) ```@media only screen and (min-width: 992px) {...} ``` ## **實作開始** * 原始網頁(尚未加入 RWD) <iframe height='500' scrolling='no' title='原始網頁(尚未加入 RWD)' src='//codepen.io/bessyhuang/embed/oQeoPq/?height=265&theme-id=0&default-tab=css,result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/bessyhuang/pen/oQeoPq/'>原始網頁(尚未加入 RWD)</a> by bessyhuang (<a href='https://codepen.io/bessyhuang'>@bessyhuang</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> 1. 先把網頁內容全部擺上 ```htmlmixed= <div class="header"> <h1></h1> </div> <div class="row"><!--row start--> <div class="col-3 col-s-3 menu"> </div> <div class="col-5 col-s-9"> </div> <div class="col-4 col-s-12 aside"> <img src="" style="width:100%;"> </div> </div><!--row end--> <div class="footer"> <p></p> </div> ``` ```css= body{ margin:0px; } .header { background-color: orange; color: white; padding: 15px; } .menu ul { list-style-type: none; /* 去掉項目符號 */ margin: 0px; padding: 0px; } .menu li { padding: 8px; margin-bottom: 7px; background-color: #33b5e5; color: white; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .menu li:hover { background-color: #0099cc; } .footer { background-color: green; color: white; text-align: center; font-size: 16px; padding: 5px; } ``` :::warning ==[box-sizing 屬性的設定值](https://www.webdesigns.com.tw/CSS_box-sizing.asp)== * content-box： --向外擴 (default) * 實際寬高＝所設定的數值＋border＋padding * border-box： --向內縮 * 實際寬高＝所設定的數值(已包含border和padding) <br> ```css= * { box-sizing: border-box; font-family: Microsoft JhengHei; } ``` ::: 2. 把viewport加到<head></head>裡 ```<meta name="viewport" content="width=device-width, initial-scale=1.0">``` 3. float & % 的概念帶入 :::success ==[float 屬性：Used for positioning and layout on web pages.](http://www.flycan.com/article/css/css-float-442.html)== * left - 從左開始浮動 * right - 從右開始浮動 <br> ```css= [class*="col-"] { float: left; padding: 15px; width: 100%; /* For mobile: 0px ~ 600px */ } @media only screen and (min-width: 600px) { .col-s-1 {width: 8.33%;} .col-s-2 {width: 16.66%;} .col-s-3 {width: 25%;} .col-s-4 {width: 33.33%;} .col-s-5 {width: 41.66%;} .col-s-6 {width: 50%;} .col-s-7 {width: 58.33%;} .col-s-8 {width: 66.66%;} .col-s-9 {width: 75%;} .col-s-10 {width: 83.33%;} .col-s-11 {width: 91.66%;} .col-s-12 {width: 100%;} } @media only screen and (min-width: 768px) { .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} } ``` ::: :::info ```css= .row::after { /* ::after 偽元素*/ content: ""; /*欲插入的""內容接續在.row後面*/ clear: both; /*左右兩側均不允許浮動元素。*/ display: block; /* 會換行 (.row以後的東西換到下面去)*/ } ``` * ```::after``` selector inserts something after the content of each selected element(s). * ```::before``` selector to insert something before the content. * ```::before```、```::after``` 兩者都是以 display: inline-block 的屬性存在 <br> ::: ## **RWD 完成~** <iframe height='500' scrolling='no' title='我的 RWD 範例' src='//codepen.io/bessyhuang/embed/Xyazej/?height=265&theme-id=0&default-tab=css,result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/bessyhuang/pen/Xyazej/'>我的 RWD 範例</a> by bessyhuang (<a href='https://codepen.io/bessyhuang'>@bessyhuang</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> * 將head內的style提出來放```css_style.css``` ```htmlmixed= <link rel="stylesheet" type="text/css" href="css_style.css"> ``` --- ## [使用 bootstrap](https://bootstrap.hexschool.com/docs/4.0/layout/grid/) * 加入bootstrap CDN： ```htmlmixed= <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> </head> ``` * 刪刪樂~ ```css= * { box-sizing: border-box; } [class*="col-"] { float: left; padding: 15px; width: 100%; /* For mobile: 0px ~ 500px */ } @media only screen and (min-width: 600px) { .col-s-1 {width: 8.33%;} .col-s-2 {width: 16.66%;} .col-s-3 {width: 25%;} .col-s-4 {width: 33.33%;} .col-s-5 {width: 41.66%;} .col-s-6 {width: 50%;} .col-s-7 {width: 58.33%;} .col-s-8 {width: 66.66%;} .col-s-9 {width: 75%;} .col-s-10 {width: 83.33%;} .col-s-11 {width: 91.66%;} .col-s-12 {width: 100%;} } @media only screen and (min-width: 768px) { .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} } .row::after { content: ""; clear: both; display: block; } ``` --- ![](https://i.imgur.com/zDMwyQe.png) <iframe height='500' scrolling='no' title='RWD Bootstrap 範例' src='//codepen.io/bessyhuang/embed/bQrZLJ/?height=265&theme-id=0&default-tab=html,result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/bessyhuang/pen/bQrZLJ/'>RWD Bootstrap 範例</a> by bessyhuang (<a href='https://codepen.io/bessyhuang'>@bessyhuang</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe>