最近在處理View的版面，發現每個工程師並不是對CSS的權重或是設計方法有深度了解，雖然知道css語法，但卻不會有統一性的設計方針，導致View中有很多地方都出現CSS。

　　有的人習慣寫在Inline style裡面如:<div style="width:100%">，有的人習慣寫在class裡面，或是有人會用asp.net mvc5提供的bundle功能將css包好在@Script.Render的方式引用。

　　也有人喜歡直接在View中，直接使用<style></style>將CSS語法包在View中，導致維護上的困難，因此最近剛好要需要研究這一塊，來複習一下前端的知識，再找時間將專案Refactoring(OTZ)。

定義

所謂「自動調適型網頁設計」(Responsive Web Design，簡稱RWD)，就是讓網站能夠根據PC、平板、手機等不同大小的畫面，自動調整成最適合的顯示版面。

主要技術

• Media Queries:來自CSS3的技術，可以根據網頁寬度、畫面解析度、裝置方向等條件，對應調整Html的版面。
• Fluid Grid:是由兩種技術組成，一是將網頁元素以各種大小方格配置版面的「方格設計」(Grid Design)如前一天介紹Bootstrap3中所使用到col-*，以及能依瀏覽器視窗大小自由縮放網頁元素的「流動版面」(Liquid Layout)。
• Fluid Image(流動圖片):依據瀏覽器視窗大小自動縮放圖片的方法。

Media Queries

語法:@media 媒體類型 and (條件) {}
條件如:

• width:寬度
• height:高度
• device-width:裝置寬度
• device-height:裝置高度
• aspect-ratio:視窗長寬比例(長/寬)
• device-aspect:裝置螢幕長寬比
• orientation:裝置方向

Media Type

• all:所有媒介
• screen:螢幕大小
• print:印表機
• handheld:行動裝置
• projection:投影機
• tv:電視
• tty:寬度字寬的裝置
• braille:點字機
• embossed :點字印表機

@media screen and (max-width:480px) {
...
}
@media screen and (min-width:481px){
...
}
@media screen and (min-width:768px){
...
}
@media screen and (min-width:1024px){
...
}

Fluid Grid

一開始會先使用方格設計個別元素，在確定個別元素位置之後，將px單位改為%單位，就能依據畫面大小調整。
例如網頁版的配置如下:

body {
width: 1024 px;
}
#contents{
width: 740px;
}
footer{
width: 1024px;
}

在設計完整個版面後，我們將px換成%單位。

body {
width: 100%;
}
#contents{
width: 76.266%;
}
footer{
width: 100%;
}

子元素百分比(%) = 欲變更元素的px/父元素的px*100
再與Media Queries做搭配，即可滿足個畫面最適合的顯示效果

Fluid Image

針對頁面中的圖片，可在CSS設定保持長寬比。

• img圖片的設定語法
  img { max-width:100%; height:auto; }
• 背景圖片的設定語法
  #background-image{ background-size:cover; }
• 其他媒體元素的設定語法
  embed, object{ max-width:100%; }