---
title: 'RWD 切版教學'
disqus: hackmd
---
RWD 切版教學
===
## 目錄
[TOC]
## CSS 長度單位：px, em, rem, vw, vh 該怎麼用？
- % （百分比）則是相對單位，會繼承上層的值，例如你在一個寬度 200px 的矩形中設另一個寬度為 50% 的盒子，盒子的寬度就會是 100px
- em 就是字母「M」的發音，一個 Em 就是一個 M 的寬度（M 是英文字母中最寬的一個），句體來説，它會吃上層 font-size 的設定
```css
.father {
font-size :16px;
}
.box {
width: 1em; // 16px
height: 0.4em; // 6.4px
font-size: 1.2em; // 19.2px
}
```
- rem 的 r 是 root 的意思，它會拿你網站的最上層元素（通常是 <body>）當作參考
```css
body {
font-size: 18px;
}
.box {
width: 1rem // 18px;
}
```
- vw、vh 相對可視範圍單位
> vw 和 vh 則是 viewport width 和 viewport height 的縮寫。亦即整個視窗寬度的比例
```css
width: 100vw;
height: 100vh;
能確保這個東西滿版，不會有捲軸。
```
- vmin 和 vmax 可以使用。
```
vmin使用最小那边的比例。
> 如果浏览器窗口的高度小于他的宽时，1vmin将等价于1vh
> 如果浏览器的宽度小于他的高度时，1vmin等价于1vw
vmax则相反：
> 它使用最大的那一边。因此当viewport的宽大于高时，1vmax等价于1vw；
> 如果浏览器的高大于宽时，1max将等价于1vh。
此部分廣泛應用在手機或者平板在翻轉操作時的畫面 正確性較高!
```
position 定位的概念
---
> position 目前可以使用的值有 5 種，列舉於下
- static (靜態定位)
> 「static 靜態定位」是定位中最少用到的，此定位是將其他定位特性取消，回到最原始的狀態
- relative (相對定位)
> 將設定的物件，將其參考空間參考自身原始的資料流位置，且此種定位值並不會將物件獨立一層，搭配其它 CSS 屬性，如 top 、 right 、 bottom 、 left 可做到「顯示位置的偏移」
- fixed (固定定位)
> fixed 會定死在一個可視範圍內，不管你如何捲動你的視窗卷軸，這個物件就是怎樣都不會換位置，但 absolute 若定位在視窗的話則會被捲走，這也是兩者之間非常明顯的差異點。
- absolute (絕對定位)
> 參考離自身最近且具備定位設定的父層空間，倘若沒有任何一個父層空間俱備定位設定，物件將以最外層視窗座位參考空間, 通常外層會搭配position: relative
- sticky (黏貼定位)
> 結合了 relative 與 fixed 兩大特性，這個定位的特色
> 當物件呈現 fixed 效果時，其所能 fixed 的空間是該物件的父層空間
> 當視窗往下捲到超過 sticky 物件的父層空間時， sticky 物件則不會再呈現 fixed 的效果，而是會被捲離視窗範圍。
> https://codepen.io/Vue_Steve/pen/abxGGYR
> 此部分廣泛應用在視差滾動效果中
## Flex 教學
```css
.flex-container {
display: flex | inline-flex;
flex-direction: row | column; 對齊方向
flex-wrap: nowrap | wrap; 是否換行
justify-content: flex-start | flex-end | center | space-between ; // 水平
align-items: flex-start | flex-end | center; 垂直
}
```
- flex重要概念
> ∙flex: Flexbox最重要的數值，分別是**flex-grow**、**flex-shrink** 和**flex-basis**。規定元素如何伸長或縮短以適應flex容器中的可用空間。
```css
.flex {
/* 基本樣式 */
width: 700px;
height: 200px;
border: 1px solid #999;
font: 10px sans-serif;
/* Flexbox */
display: -webkit-flex;
-webkit-flex-direction: row;
display: flex;
flex-direction: row;
}
.flex > div {
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
width: 100px;
}
範例: https://codepen.io/Vue_Steve/pen/dyLKoPy
```
## mixin 工具
```css
$c1: #fff
$c2: #000
$c3: #d8c99f
$c4: #75442f
$cRed: #bc0e14
$cPurple: #c43aeb
$cBlue: #35a6e3
$cGreen: #00843b
$headerBg: linear-gradient(to right, rgba(19,0,0,0.7) 0%,rgba(19,0,0,0.8) 25%,rgba(19,0,0,1) 50%,rgba(19,0,0,0.8) 75%,rgba(19,0,0,0.7) 100%) //--【電腦版】header：背景色
$headerBorder: #dccca0 //--【電腦版】header：邊框色
$headerMainColor: #dccca0 //--【電腦版】header：元件主色
$mbMenuBg: #5a0000 //--【手機版】側選單：選單背色
$mbActBg: #7d0000 //--【手機版】側選單：活動連結區塊背色
$mbBtnBg: #e3c66f //--【手機版】側選單：立即登入按鈕背景色
$mbMainColor: #ffffff //--【手機版】header & 側選單：元件主色
$pc-media: 1200px
$pad-media: 992px
$phone-media: 768px
$iphone-media: 575px
//========== mixin ==========
@mixin size($w,$h:$w)
width: $w
height: $h
@mixin setAuto($w, $m:auto)
width: $w
margin: $m
@mixin setImgBg($file, $w:null, $h:null, $size:initial, $post:top center, $repeat:no-repeat, $color:null)
background-image: url(~@img/#{$file})
background-repeat: $repeat
background-size: $size
background-position: $post
@if($color)
+setBg($color)
@if($w and $h)
+size($w, $h)
@mixin setBg($color)
background-color: $color
@mixin setBorder($w, $c)
border: $w solid $c
@mixin position($type, $top, $left, $zindex:0)
position: $type
top: $top
left: $left
z-index: $zindex
@mixin setPosAbs($top:0, $right:0, $bottom:null, $left:0, $zindex:0)
position: absolute
top: $top
right: $right
bottom: $bottom
left: $left
z-index: $zindex
@mixin setFlex($horizontal:center, $vertical:center)
display: flex
align-items: $vertical
justify-content: $horizontal
@mixin setFont($fz, $les:null, $lh:inherit, $fw:normal)
font-size: $fz
letter-spacing: $les
line-height: $lh
font-weight: $fw
//-pc
@mixin pc-width()
@media (max-width: $pc-media)
@content
//-pad
@mixin pad-width()
@media (max-width: $pad-media)
@content
//-phone
@mixin phone-width()
@media (max-width: $phone-media)
@content
//-iphone
@mixin iphone-width()
@media (max-width: $iphone-media)
@content
//-only iphone5
@mixin iphone5-width()
@media (width: 320px) and (height: 568px)
@content
//===================================
```
## RWD 概念應用
- 要使用RWD應用時需要先有此段(目前框架都已經先幫我們處理好了, 但是概念還是需要建立)
```css
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
```
- @media
> RWD 是在 .css 檔案使用 @media 將需要響應式的 CSS 語法包在裡面：
> min-width的意思是指，當最小寬度 >540px 時，就套用裡面的 CSS 語法。
```css
當最小寬度 >540px 時
@media(min-width: 540px){ }
當最大寬度 < 540px 時
@media(max-width: 540px) {}
實際我們的mixin寫法 - 寬度界在320px~568px之間
@mixin iphone5-width()
@media (width: 320px) and (height: 568px)
@content
結論: 不管要用max-width或是min-width 抑或是直接寫固定寬度給範圍都可以, 就看工具如何寫與團隊如何配合。
```
- 響應式的寫法有兩種：
1. 由小寫到大
2. 由大寫到小 <<< 個人習慣
```css
.box1 {
height: 80px;
background: lightpink;
}
@media(max-width: 920px) {
.box1 {
background: orange;
}
}
@media(max-width: 768px) {
.box1 {
background: lightyellow;
}
}
@media(max-width: 540px) {
.box1 {
background: lightgreen;
}
}
```
> 由上範例可以得知上範例可以得知, 當將樣式包在media 時, 就是所有寬度都優先吃最外面的樣式, 當media的寬度符合目前的裝置寬度時, 同樣class的樣式在media 的優先權重就會高於最外層的class name。
> 所以我們可以以此概念去做設計
```
這是我們目前RWD的中斷點:
$pc-media: 1200px
$pad-media: 992px
$phone-media: 768px - 類似ipad2 的版面寬度
$iphone-media: 575px
```
## 切版小技巧
- 當有時候排版時, 發現裡面的內容並沒有頂在外層最上面時, 有可能是預設tag的樣式, 或者是其他padding或是margin影響, 如果調整後都沒改變, 可以試試vertical-align: top;
- 有時候當hover效果要從A圖片, 變成B圖片時, 效果是opacity: 0 => 1, 此種雖然是消失, 但是佔用空間還是存在的, , 可以透過一點小技巧, 將B圖片預設給position: absolute; top: 0, 這樣A, B兩張圖片就會並排在同一個區塊, 在來只要用變數判斷哪一張要顯示即可
## Q&A
問題一:
請問放大鏡是如何放到input上面, 並且定位在裡面的左邊呢?
問題二:
請問此客製化下拉選單組件要如何設計呢?
Sign in with Wallet
Connect another wallet