QK-Style | For Lovers

CSS3 Media Queries: 協助編寫流動版網頁

由 CARO 發表於 2011 年 4 月 05 日

CSS2 的 Media Queries 可以容許大家設定打印版CSS ，有用過的人都知道其用途。而今次 CSS3 就提升了 Media Queries 的實用性，可以辨識出更多的 Media Type。例如在同一個樣式表內，為不同解像度的瀏覽器提供不同的樣式。

使用 CSS3 Media Queries

示範網頁：http://qkla.com/demo/css3-media-queries/
調整瀏覽器的視窗大小，再看看其變化。

Max Width

瀏覽器的視窗大小少於 760 像素 (即少於或等於759像素) 時，便會運用以下的 CSS 。

@media screen and (max-width: 759px) { ... }

Min Width

瀏覽器的視窗大小大於 1000 像素 (即大於或等於1001像素) 時，便會運用以下的 CSS 。

@media screen and (min-width: 1001px) { ... }

混合使用

你可以選擇結合多個 media queries 。以下的示範為瀏覽器的視窗大小少於或等於 1000 像素及大於或等於 760 像素。

@media screen and (max-width: 1000px) and (min-width: 760px) { ... }

Device Width

當設備的大小等於 max-device-width 時，指定的 CSS 便會運行。
註：max-device-width 是指設備的實際解折度，而 max-width / min-width 則是指當前瀏覽器的視窗大小。

@media screen and (max-device-width: 480px) { ... }

獨立的樣式表

如果想額外增加一個樣式表，只要在內加入：

<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" />

在 IE 運用

IE 8 或更舊的版本不支援新的 media query ，所以就要用 Javascript 來實現。以下為一些參考。
http://code.google.com/p/css3-mediaqueries-js
http://plugins.jquery.com/project/MediaQueries

* Media Queries 對瀏覽器支持情況：
http://caniuse.com/#search=css-media

實例參考

Hicksdesign
The Celebrated Miscellany

總結

Media Queries 只是其中一種協助編寫流動版網頁的功能，並不代表能將你的網頁優化。假如你的網頁所用的圖像處理不好，也不會在流動設備上顯示出好效果。
這裏有個小參考，是關於在iPhone顯示上的圖像處理。

發表於 CSS, 教學 | 發表迴響

HTML5 入門教學

由 CARO 發表於 2011 年 4 月 02 日

隨著新版本的網頁瀏覽器推出，它們對 HTML5 的支援度也相應提升。同時，越來越多網頁開發者留意到 HTML5 的前景與發展。

在使用 HTML4 或 XHTML 時，我們會利用 <div> 來排版，然後再由 stylesheets 來改變樣式。但是，複雜的網頁設計需要用到大量的 <div> 標籤，在編寫時確實令我們感到煩惱。HTML5 便針對這一點，讓新一代的標籤更語言化，如 <header>, <nav>, <article>, <footer> 等。從此，我們便能減少使用大量無意義的 <div> 標籤，使整個網頁的編碼更整潔。

以下為本網站提供的 HTML5 示範網頁，其後會簡述該網頁中用到的各個標籤。

Demo Page: http://qkla.com/demo/html5/

HTML5 doctype

在文件頂部簡單地加入 DOCTYPE 聲明，意味著一個新的 HTML5 已被建立。

<!DOCTYPE html>

即使用了 HTML5 doctype ，我們仍能運用 XHTML 的語法。不過，對於編寫 HTML5 網頁，過份使用 XHTML 語法，只會令網頁編碼不夠統一。

Head section

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>HTML5 - Getting Started - Demo Page</title>
  <style type="text/css">
  ...
  </style>
  <!--[if lte IE 8]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
 </head>

相對於過往 HTML4 或 XHTML ， DOCTYPE 聲明變得更簡短，更易記。其他的標籤都沒有大分別，依舊可以在 HTML5 中使用。

Working in IE

在 head 中調用了一個 JavaScript 文件，這個文件是為兼容 IE8 (或更舊版本) 瀏覽器而設。透過 IE 條件註釋，最新版本的 IE9 及非 IE 瀏覽器便會忽視這段代碼。

參考來源：remy sharp’s b:log

<geader>, <hgroup> and <nav> Tags

<header> 用以組合網頁頂端的內容，如網頁名稱及導航列選單等。 <hgroup> 則是用來組合所有標題標籤 <h1> – <h6> 。而 <nav> 就被定義用作導航，與 <hgroup> 一樣可以放在任何位置。


<header id="header">
 <hgroup>
  <h1>QK-Style HTML5 Page</h1>
  <h4>Demonstration of Using HTML5</h4>
 </hgroup>
 <nav>
  <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Portfolio</a></li>
   <li><a href="#">Contact</a></li>
  </ul>
 </nav>
</header>

<article>, <section>, <aside> and <figure> Tags

利用 <article> 將文章獨立集起，然後用 <section> 來包裹整篇文章。假若需要在文章的旁邊加入一些圖片或注釋，就會使用 <aside> 。而在 <aside> 入面就以 <figure> 來包裹著一些有著一定流量消耗的內容，如圖表、相片及圖像等。即使沒有這些內容，也不會對整篇文章有大影響。


<article id="page-content">
 <section>
  <h2>Hello World!</h2>
  <p>...</p>
  <p>...</p>
 </section>
 <aside>
  <figure>
   <img src="HTML5-logo.png" alt="HTML5-logo" />
  </figure>
 </aside>
</article>

<aside> Tag

在以上的編碼中， <aside> 為我們帶來了很多方便。過往我們設計一個有左/右側內容的網頁，都只能使用兩個 <div> ，一左一右來間隔網頁。現在，只要利用這個 <aside> 標籤，便可以輕易地為網頁排版佈局。

<footer> Tag

最後，在整個網頁的頁底，會使用到 <footer> 。同樣地，利用 <section> 將一些頁底資料包裹，如作者資料及版權資訊等。

Demo Page: http://qkla.com/demo/html5/

發表於 HTML, 教學 | 發表迴響

整燈 – 最終回

由 CARO 發表於 2011 年 3 月 29 日

經過數月黎既努勞力，尋日終於交左盞燈。

由設計到買料，由製作到改善，都好有新鮮感。突破了小弟好多的第一次，十分好玩

今次整燈用了大概六十至八十蚊。材料包括：亞加力膠片一塊；飛機木數條；及牛油紙與普通膠片數張。外殼以「飛機木」來整，主要原因是很容易買到，切割亦都不難。唯價錢一點也不便宜喔！

為了紀念第一次產品設計功課，所以花了一點時間及心血，製作了人生第一套用 500D 以 1080p 全高清拍攝的短片。同時，小弟也是第一次用 Premiere Pro 來剪片，所以有很多很多不足之處…

不打緊，好玩就行了

發表於閒情雅致 | 已標籤手工藝, 燈 | 發表迴響

«2 345 6 »