在線測試網頁在不同屏幕尺寸的顯示效果

發表於 HTML, 教學已標籤屏幕 |

在設計網頁時，我們必須留意到網頁在不同屏幕尺寸下顯示的兼容程度。如果你的設計是針對於某些特定的裝置 (如iPhone) ，就必須去確保沒有任何顯示上的問題。以下有一些實用的網址，希望在設計上可以幫助你。

PX CALC: DPI Calculator with Dot Pitch, Size, Aspect Ratio, Pixels, and Megapixels
找出你的顯示器 DPI 及真實列印尺寸
http://www.pxcalc.com/

ViewLikeUs – Check Sites in Various Resolutions!
測試不同的解像度
http://viewlike.us/

Mobile phone emulator
測試不同的手提電話
http://www.mobilephoneemulator.com/

iPad Peek
http://ipadpeek.com/

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

發表於 CSS, 教學

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顯示上的圖像處理。

HTML5 入門教學

發表於 HTML, 教學

隨著新版本的網頁瀏覽器推出，它們對 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/

«2 345 6 »