## <font class="h2">UI設計響應式網頁應注意的細節</font>

###### tags: `RWD`
<style>
.h2 {
background: linear-gradient(135deg,#fff,#537479) ;
color: #537479;
display:block;
padding: 6px 5px;
border-radius: 4px;
}
.h3 {
background: linear-gradient(180deg,#fff 50%,#c9d5d4) ;
color: #537479;
display:block;
padding: 6px 5px;
border-bottom: 3px solid #537479;
}
.h4 {
color: #537479;
font-weight:bold;
font-size:1.1em;
}
</style>

### <font class="h3">動線設計：並非所有內容都要全部塞到網頁內容</font>
不重要內容可以隱藏
<br><br><br><br><br><br>

### <font class="h3">斷點時機：設計多欄式佈局的必要觀念</font>

文字行數寬度不要太長，左右可以做留白，視覺上比較舒適
:::info
- 中文內文單行字元 30～40 會比較好閱讀
- 英文則是 32～80 個字元數
:::
<br><br><br><br><br><br>

### <font class="h3">點擊範圍：設計讓人好點選的元素 </font>

手指點選範圍高度至少44px
<br><br><br><br><br><br>

### <font class="h3">載具特性：使用者行為 touch、hover </font>

PC上滑鼠移開(hover)提示就會消失，
手機的點擊(touch)後不能讓它消失
<br>

下拉式選單PC上滑鼠滑過(hover)就會出現選單，
手機上是點擊(touch)出現選單
<br><br><br><br><br><br>

### <font class="h3">斷點元素：只有手機才會顯示的功能與Layout切換</font>
Layout 是網頁的通用版型的意思
### <font class="h4">➤PC版</font>
選單為水平排列
<br>

隱藏漢堡選單
<br><br><br><br><br>

### <font class="h4">➤手機版</font>
顯示漢堡選單
<br>