2012年8月30日 星期四
2012年8月21日 星期二
iPad CSS範例
基本的ipad 兩個方向：
在橫式模式下，有兩列佈局，其主要內容在左邊和右邊分為三列放置。
在直式模式下，主要內容填滿螢幕寬度和三個區塊內容區域水平放置。
兩個方向中，在頂部有一個標題和頁腳底部。
這些都改變寬度1024px，寬768px，在演示頁 裡更詳細的示意圖像素尺寸。
下面是在iPad演示佈局模擬器截圖：
在直式模式下，主要內容填滿螢幕寬度和三個區塊內容區域水平放置。
兩個方向中，在頂部有一個標題和頁腳底部。
這些都改變寬度1024px，寬768px，在演示頁 裡更詳細的示意圖像素尺寸。
下面是在iPad演示佈局模擬器截圖：
如何工作的呢？
第一件事情是鎖定佈局，使每個像素與iPad的屏幕的像素以1:1的比例，做下面的META標籤：
<meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" />
鎖定佈局以1:1的比例防止變焦和滿分，這通常發生當iPad是旋轉（正常，橫向模式是縮小跨越1024個像素的寬度的網頁被顯示的，因為，相對於直式模式下，寬度只有768px）。
接下來，在直式和橫式模式，用CSS規則改變佈局，通常覆蓋其中的一些在底部的CSS文件時，該設備是在肖像模式下使用@ media規則。
這裡是一個精簡版的CSS：
接下來，在直式和橫式模式，用CSS規則改變佈局，通常覆蓋其中的一些在底部的CSS文件時，該設備是在肖像模式下使用@ media規則。
這裡是一個精簡版的CSS：
/*normal styles here */
#wrap {
width:1024px;
}
@media only screen and (orientation:portrait){
/* portrait styles here */
#wrap {
width:768px;
}
}
iPad的設計資源
模擬器
iPad
測試您的網頁瀏覽器在iPad模擬器。點擊旋轉的頂部iPad的邊界。
LIVEVIEW iPhone和iPad
實時查看是一家專門從事遠程屏幕查看應用程序，旨在作為一種工具來幫助設計人員創建移動應用程序的圖形
2012年8月20日 星期一
2012年8月17日 星期五
2012年8月16日 星期四
2012年8月15日 星期三
攝影部落客參考
攝影部落客參考 :
飛機 ／運動 solomon的無限空間 http://chenshilun.pixnet.net/blog
鐵道 ／交通 新南極轉運站 http://ice2006.pixnet.net/blog
旅遊 拈花惹草 Morris http://yuminghui.pixnet.net/blog
風景／婚禮 馬克的攝影部落 http://album.blog.yam.com/markliang
風景 DJ http://djphoto.pixnet.net/album
風景 Mike http://www.mike.idv.tw/category/landscape
飛機 ／運動 solomon的無限空間 http://chenshilun.pixnet.net/blog
鐵道 ／交通 新南極轉運站 http://ice2006.pixnet.net/blog
旅遊 拈花惹草 Morris http://yuminghui.pixnet.net/blog
風景／婚禮 馬克的攝影部落 http://album.blog.yam.com/markliang
風景 DJ http://djphoto.pixnet.net/album
風景 Mike http://www.mike.idv.tw/category/landscape
解決IE6~8 不支援 CSS3的Hack方法
CSS3 的特性讓開發者都很方便, 可以省去很多沒用的 HTML,
也可以省掉不少切圖的工.
問題是, 現在最多人使用的瀏覽器(IE6~IE8)都還不支援 CSS3.
詳見: CSS Compatibility and Internet Explorer
註: IE8 部份支援 CSS3
也可以省掉不少切圖的工.
問題是, 現在最多人使用的瀏覽器(IE6~IE8)都還不支援 CSS3.
詳見: CSS Compatibility and Internet Explorer
註: IE8 部份支援 CSS3
2012年8月14日 星期二
2012年8月13日 星期一
訂閱：
文章 (Atom)