iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 13
0

  最近在處理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%; }

上一篇
Day12_Bootstrap3使用於Asp.net MVC5之GridSystem
下一篇
Day14_MVC之ViewModel
系列文
從Asp.Net MVC5的起跑點認識現代網站30

尚未有邦友留言

立即登入留言