在連小孩和老人都有款手機,平板...等等裝置的社會,對這些美工人員來說,解析度不外乎是個問題
如今要打敗可惡解析度魔王,首先要在三個地方著手
第一關是文字
以前遇到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
留言列表
線上遊戲 (4)
