More Related Content
Similar to Hyweb RWD & CMS develop scenario
Similar to Hyweb RWD & CMS develop scenario (20)
Hyweb RWD & CMS develop scenario
- 5. RWD 原理
CSS3 media query
⾃自適應網⾴頁設計的主要核⼼心技術是CSS3 media query ,說穿了就是讓不同
解析度去套⽤用不同的CSS設定,所以多少種尺⼨寸,就要寫多少組CSS。
max-width(@media screen and (max-width: 600px))
min-width(@media screen and (min-width: 900px))
device-width(@media screen and (max-device-width: 480px))
針對iPhone4提供專⽤用的css設定檔
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)"
type="text/css" href="iphone4.css" />
針對iPad的Portrait Mode(直⽴立)與Landscape Mode(橫躺)兩種瀏覽模式給
予不同的css設定檔
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
參考設計
http://mediaqueri.es/
https://dribbble.com/shots/1004476-Wireframes/attachments/118672
- 16. 最理想的 RWD html spec:
單欄式 雙欄式 複合式 mobile
RWD每⼀一個區塊都必須是獨⽴立的,
因為⽅方便擠壓成mobile的排版樣式。
- 50. 常⾒見QA
1. 我的客⼾戶說IE7 IE8 看不到RWD 怎麼辦?
2. 為什麼我的⼩小⽶米機會跑版?
3. RWD是否會增加loading?
4. 上稿資料在⼿手機裡跑版了!
5. RWD 怎麼估⼯工時?
6. RWD可以過無障礙嗎?
7. ⼀一欄?⼆二欄?還是三欄?
8. ⼀一定要⽤用HTML5來開發嗎?
9. 關於RWD⼯工程師要做什麼?