在連小孩和老人都有款手機,平板...等等裝置的社會,對這些美工人員來說,解析度不外乎是個問題

如今要打敗可惡解析度魔王,首先要在三個地方著手


第一關是文字

以前遇到CSS,老師都會說用px單位,沒錯,px是一個不會變的大樹,無論哪家瀏覽器或放大縮小都不會變,就是因為不會變才GG

因此這時就要用em,他會隨你放大解析而放大(GG開始)

1em=10px,因此我們要動動頭腦算數學

以下是使用各種標籤設定大小轉換範例

公式為target font size(子框大小)/font size of containing element(父框大小)=result

30px(<h1>大小)/10px(預設瀏覽器大小)=3em

當如果設定<hl>底下<a>,而不是以預設瀏覽器推算

14px(<a>大小)/30px(<h1>大小)=0.4666667em

看似已解決這一關,但其實不然,我偷去爬文發現em有繼承概念,瞬間躺地板

才第一關就無解,於是我不灰心繼續爬,發現CSS3在大小有增加新成員名為vh(畫面高度百分比),vw(畫面寬度百分比),vmin,vmax

1vh=1%=螢幕高度px*1%=結果px

1vw=1%=螢幕寬度px*1%=結果px

他是根據螢幕解析度決定字顯示,真是天助我也,不過也要看瀏覽器版本支不支援

px,em,vh,vw參考網址:http://ithelp.ithome.com.tw/question/10130500
vh,vw參考網址:http://www.sitepoint.com/new-css3-relative-font-size/


第二關是網頁

現今這麼多流動裝置,因此我們常用px作為網頁整體大小會造成困擾,於是要用%來對應不同裝置

以下舉個版面計算%例子

父框900px=900px/10px=90%

側框300px=300px/900px=30%

內容框600px=600px/900px=60%

然而在margin因為是獨立容器,因此計算上稍有不同

內容框設margin-left30px=30px/900px=3%

至於padding因為是包含容器內,因此跟之前計算沒有不同

內容框設padding10px=10px/600px=1%

雖說有%能套用全部裝置,但不能改變版面分配,於是又要躺地板

CSS3心疼這些美工人員,於是生出media能幫我們偵測出螢幕大小,來對應不同狀況

@media 版面名稱 and (屬性:值) and (屬性:值)... {
.....
}
載入至html
<link rel="stylesheet" type="text/css" href="XXX.css" media="版面名稱 and (屬性:值)....">

關於屬性設定
min-width:最小視窗寬度
max-width:最大視窗寬度
min-device-width:最小裝置寬度
max-device-width:最大裝置寬度
media參考網址:http://fundesigner.net/css3-media-queries/

雖然有%和media這兩大幫手,可是當一個大框寬度超過裝置螢幕,這時就要用inherit繼承套用父框

(大框)width:inherit;

還有大框下內容的float也要設為none

(大框內小框)float:none;

以下為範例

.big {

   width:inherit;

}

.small {

   float:none;

}

 

<div class="big">

    <div class="small">....</div>

    <div class="small">....</div>

     ....

</div>

inherit參考網址:http://www.w3schools.com/cssref/css_inherit.asp

有時會把裝置橫看或直看,當然這會影響網頁大小,在media中也有這種方法來知道使用者目前是哪種觀看

orientation:portrait直看/landscape橫看;

orientation參考網址:http://www.hongkiat.com/blog/css-orientation-styles/

可以針對不同裝置或螢幕設定px比例,以下是針對不同瀏覽器寫法

@media screen and (min-device-pixel-ratio:比值)

@media screen and (-o-min-device-pixel-ratio:比值)

@media screen and (-webkit-min-device-pixel-ratio:比值)

pixel-ratio參考網址:http://ryanve.com/lab/@media/


最終關是媒體

前面運用%和media讓版面能對應不同行動或桌機,但在媒體需特別處理

1.儲存的媒體解析度越大越好

2.把媒體標籤最大的寬度設100%

img,embed(嵌入檔案),object(嵌入檔案),video {
     max-width:100%;
}

3.載入的媒體設定寬度以%單位(別忘子框px/父框px=結果%)

about img {
     width:30%;
}

因為個人有點痴呆,忘記embed,object是怎麼用,於是爬到w3schools,以下為兩個標籤使用與注意事項

Html嵌入檔案
<object width="400" height="400" data="helloworld.swf"></object>
注意:
Some HTML 4.01 attributes are not supported in HTML5.  <<在Html 5一些Html屬性不支援
The "form" attribute is new in HTML5.  <<Html 5多了form屬性

Html 5嵌入檔案
<embed src="helloworld.swf">

object參考網址:http://www.w3schools.com/tags/tag_object.asp
embed參考網址:http://www.w3schools.com/tags/tag_embed.asp

創作者介紹
創作者 o迷苓o 的頭像
o迷苓o

~米漿牛奶~

o迷苓o 發表在 痞客邦 留言(0) 人氣()