Fluid Layout

* 把字體從 px -> em

html { font-size: 16px; }
body{
font-size: 62.5%;   /*  1em = 10px  */
}

target / context = result

font-size 的 em 跟父容器有關,如果父容器  font-size: 10px

30px / 10px = 3em

這樣類推

line-height 的 em 則要拿 font-size 當分母

—————————

在設定 fluid layout 時把 width, margin, padding 都用 % 表示

可以用這個來算
http://responsv.com/flexible-math/

公式一樣是用
target / context = result

不過要特別注意的是
margin 是用 父容器的 width 當分母
padding 卻是用 子元素的 width 當分母

————

Media Query 可以來找出 Break Points

把版面會疊起來或不好看的地方的設個 Point

@media screen and (max-width: 320px) {
width: inherit;
float:none;
}

上面這段用來把寬度 320px 以下的螢幕作調整
寬度繼承、float 取消

Media Query 還有很多其他的屬性 例如手機的垂直或橫放
orientation: “portrait" or “landscape"

—————–

媒體如圖片影片等可以設個最大寬度讓他不得超過

img, embed, object, video, {
max-width: 100%;
}

也可以用以下幾個工具
字體的調整:
https://github.com/davatron5000/FitText.js
https://github.com/davatron5000/Lettering.js
影片的調整:
https://github.com/davatron5000/FitVids.js
另外有一些相容性不好的情況:
ie6
可以用下面這個試試
http://clagnut.com/sandbox/imagetest3

Firefox2 & ie7 on windows7  的 max-width 支援很差
用 AlphaImageLoader

——————–

解析度比較高的 Retina 裝置怎麼辦呢?

就 Media Query 去偵測 pixel 然後給 @2x 檔 (這是 iOS命名慣例)
然後去固定 background-size

@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
background-image: url(logo@2x.png);
-webkit-background-size: 12px 16px;
background-size: 12px 16px;
}

也可以用下面這個來創造類同 video 的 picture tag 也可以在上面針對media query 換圖片
https://github.com/scottjehl/picturefill

<picture alt="Our Camp Site">
<source src="camp-site.jpeg" />
<source src="camp-site-lrg.jpeg" media="(min-width: 900px)" />
<noscript>
<img alt="Our Camp Site" src="camp-site.jpeg" />
</noscript>
</picture>

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s