Responsive Web Design – Note08. 外觀設計模式(Tiny tweaks) - Benjamin Says So ......

字體：小中大

Responsive Web Design – Note08. 外觀設計模式(Tiny tweaks)

2014/06/17 14:54:52瀏覽259｜回應0｜推薦1

本篇要說明的是第四種外觀設計模式 —Layout shifter ，倒數第二種外觀設計模式囉！
這個Tiny tweaks的手法大概是最簡潔的一種外觀設計模式了。會使用這個模式的方法不外乎就是針對字型、圖片等可最小化徵調的部份動手腳。通常會使用這個模式的頁面多是十分單純的內容，例如滿佈一行一行文字搭配少許的圖片，也就是「文字型」的頁面，用這個手法就可以很快達到Responsive Web Design所預期的效果。

範列(Tiny tweaks)

範例圖片有些模糊，很是抱歉，不過其中想要表達的是字體在不同瑩幕大小下的變化，由左手邊在大於800px時最大，而到500px以下時字體最小。各位可以去執行一下範例的頁面，應該對這Tiny tweaks的設計模式立馬就能有所感受了。

Css的主要結構大致如下，就不多贅述囉。
.div1 {
background-color: #FF6060;
padding: 10px;
width: 100%;
font-size: 12px;
}
.desc:after {content: "Browser 寬度至小於 500px ! ";}
@media (min-width: 500px) {
.div1 {
padding: 20px;
font-size: 18px;
}
.desc:after {content: "Browser 寬度至少有 500px ! ";}
}
@media (min-width: 800px) {
.div1 {
padding: 40px;
font-size: 24px;
}
.desc:after {content: "Browser 寬度至少有 800px ! ";}
}

( 知識學習｜隨堂筆記 )