[HTML] Media Query

直接在 css 中使用 media query

viewport的寬度(即瀏覽器可視區域的寬度),大於等於 40em:

@media screen and (min-width: 40em){
  body{
    background-color: blue;
  }
}
  • screen:表示螢幕,除了screen以外,還有all(任何媒體類型)、print(印表機),其他很少用(projection、speech、tv、braille)。
  • min-width:表示最小寬度。
  • max-width:表示最大寬度。

在樣式表連結中使用 media query

<link rel="stylesheet" href="example.css" media="print">
<link rel="stylesheet" href="example.css" media="screen and (min-width: 40em)">

使用 media query 的其他方法

<style media="screen and (min-width: 40em)">
  ...
</style>
@import url(styles.css) screen and (min-width: 40em)

能夠查詢什麼

視埠寬度和高度 (viewport width、viewport height)

  • width:視埠寬度
  • height:視埠高度
/* 詢問視埠是否至少 40 em 寬 */
@media screen and (min-width: 40em){...}
/* 詢問視埠高度是否剛好等於 60 em */
@media screen and (height: 60em){...}

視埠(viewport)是瀏覽器視窗中實際包含網頁的部分,因此,當檢視瀏覽器視窗時,必須扣除頁面邊邊的捲動列、工具列、底部、頂端的一些選單,剩下的才是視埠(viewport)。

螢幕寬度和高度

  • device-width:裝置螢幕寬度
  • device-height:裝置螢幕高度
/* 詢問最大螢幕寬度是否小於等於 40 em */
@media screen and (max-device-width: 40em){...}

device-width 和 device-height 量測的是實際的裝置螢幕,而不是視埠,因此,調整瀏覽器視窗大小並不會有影響。

裝置定向

  • orientation:橫向或直向
/* 詢問裝置是否為橫向 */
@media screen and (orientation: landscape){...}

查詢螢幕是否為橫向或直向,可能非常有用,但可惜的是,尚未受到所有瀏覽器支援。

寬高比

  • aspect-ratio:視埠的寬高比
  • device-aspect-ratio:裝置螢幕的寬高比
/* 詢問螢幕寬高比是否為16:9 */
@media screen and (device-aspect-ratio: 16/9){...}
/* 詢問螢幕寬高比是否至少為1920:1080 */
@media screen and (min-device-aspect-ratio: 1920/1080){...}

視埠寬高比或裝置寬高比是寬度對高度的比率,因此,假如螢幕是 1000 像素寬和 500 像素高,則裝置寬高比將是 2:1

常見的監視器寬高比是 16:9(1920×1080、1366×768)或16:10(1280×800),iphone 3與4s為3:2(480×320、960×640)、iphone 5是16:9(1136×640);android手機通常都是4:3、3:2、16:9、16:10。

解析度

  • resolution:裝置螢幕的解析度
@media screen and (min-resolution: 300dpi){...}

resolution 尚未被 Safari、Chrome支援。

其它媒體特徵

以下這幾個是目前不會用到,但未來可能會有幫助的幾個項目:

  • color
  • color-index
  • monochrome
  • scan
  • grid

瀏覽器支援度

can i use

 

[HTML] 新元素

首先要介紹的當然就是 HTML5 的新元素,認識各元素標籤是學習 HTML5 重要第一步,而且還要瞭解各元素的語義,運用得正確。雖然就算整個網站全部都用<div>去做,也許在網頁呈現上看起來不會有差異,也不代表可以這樣做。瞭解語義,正確運用,是學習 HTML5 的第一步。

以下列出所有 HTML5 的新元素標籤,以及語義,先有基本的認識,在實際運用中再多加回憶。

一、結構(Structural)元素

Tag Description
<article> 代表文章/獨立元件。
<aside> 代表側邊欄。
<bdi>  
<details> 代表一個互動元件,經由點擊可展開或收合內部內容,一般搭配<summary>使用。支援度參考
<dialog> 代表一個對話框。
<figcaption> 替<figure>元素定義標題。
<figure> 用來組織具有標題的獨立內容,主要為圖片、圖表、程式碼片段。
<footer> 代表一份文件的尾部,一般除了放在<body>的最後面之外,也可置於<section>裡當做結尾。
<header> 代表一份文件的標頭,一般除了放在<body>的最前面之外,也可置於<section>裡當做開始。
<main> 定義一份文件的主要內容。
<mark> 以背景黃色highlight出一段文字。例:這是mark標籤內的文字
<menuitem>  
<meter>  
<nav> 定義一份文件的導覽列。
<progress> 定義一個任務的進度達成了多少。支援度參考
<rp>  
<rt>  
<ruby>  
<section> 定義一份文件的區段。
<summary> 用來定義<details>的標題。
<time> 定義日期/時間。
<wbr> 指明何處該斷行。IE完全不支援。

二、表單(Form)元素

 

三、圖形(Graphics)元素

 

四、媒體(Media)元素

 

[HTML] 5 的瀏覽器支援度

HTML5幾乎所有的瀏覽器都支援了,只有IE8及IE8以下未支援,所以若您的網站從IE9開始支援的話,就放心使用吧。

那如果遇到IE8瀏覽器呢?直接在head區域載入這個js即可:

<!-- 條件式註解:使 IE9 以下(不含 IE9)的 IE 瀏覽器載入 html5.js -->
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

html5.js 大致上的用意,就是透過javascript去動態建立所有 HTML5 的元素標籤,使瀏覽器支援。

[HTML5] 介紹

HTML發展至今,已歷經了非常多的版本,現在最新的即是"HTML5“,一份網頁要宣告它是使用HTML5所制定的規範非常容易,只需要在頁面的第一行加上以下這行即可:

<!DOCTYPE html>

DOCTYPE也可以是小寫。

 

而若要宣告字元編碼,也變得非常簡潔,只要在head區域加上以下這行即可:

<meta charset="utf-8">

 

所以一份基本的"HTML5″網頁,基本格式如下:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>網頁標題</title>
  </head>
  <body>
    網頁內容主文
  </body>
</html>

以上只是基本的介紹如何開始HTML5網頁文件,至於HTML5到底多了哪些東西呢?

  • 多了一些tag可用,例如:<header>、<footer>、<section>、<article>、<video>、<audio>…
  • 多了一些API可用,例如:Geolocation、Local Storage、Web Workers…
  • 移除了一些舊的tag,例如:<acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<strike>、<tt>

各個的用法及細節,會在其它HTML5文章頁面中闡述。

[HTML] iPhone及iPad的加入主畫面,及瀏覽器的shortcut icon

以下2種效果分別是怎麼辦到的呢?

1、在iPhone及iPad經由"加入主畫面",在主畫面上直接產生icon連結
在iPad或iPhone上的主畫面上顯示icon連結

只要準備好相關的圖例:144 * 144、114 * 114、72 * 72、57 * 57,共四張圖檔的png檔,在<head>裡設定以下代碼(只要更改href屬性確定有指到您所設定的圖即可):

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://carlos-studio.com/wp-content/uploads/2013/07/apple-touch-icon-144.png">

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://carlos-studio.com/wp-content/uploads/2013/07/apple-touch-icon-114.png">

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://carlos-studio.com/wp-content/uploads/2013/07/apple-touch-icon-72.png">

<link rel="apple-touch-icon-precomposed" href="http://carlos-studio.com/wp-content/uploads/2013/07/apple-touch-icon-57.png">

設定完後,即可測試囉,例圖:
分享按鈕按下後,就可看到加入主畫面的圖示

以上就大功告成啦!

 

2、shortcut icon

shortcut icon

只要在<head>加入以下代碼即可:

<link rel="shortcut icon" href="http://carlos-studio.com/wp-content/uploads/2013/07/favicon.ico">

注意檔名好像一定要是favicon.ico,此檔案是16 * 16的ico圖檔,可從favicon.cc來快速製作。


綜合以上的代碼,其實就是加入底下的代碼至<head>裡,指定好圖檔路徑即完成。

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://carlos-studio.com/wp-content/uploads/2013/07/apple-touch-icon-144.png">

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://carlos-studio.com/wp-content/uploads/2013/07/apple-touch-icon-114.png">

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://carlos-studio.com/wp-content/uploads/2013/07/apple-touch-icon-72.png">

<link rel="apple-touch-icon-precomposed" href="http://carlos-studio.com/wp-content/uploads/2013/07/apple-touch-icon-57.png">

<link rel="shortcut icon" href="http://carlos-studio.com/wp-content/uploads/2013/07/favicon.ico">

[HTML] viewport 元標籤

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">

什麼是Viewport?

桌上型Safari瀏覽器與iOS上Safari瀏覽器對於viewport的定義是有點不同的。

桌上型Safari的viewport Safari on desktop viewport viewport在桌上型的Safari瀏覽器來說,其實指的就是可視區域(visible area)。無論使用者拉大或縮小視窗,viewport指的都是可視區域。
iOS上Safari的viewport

#1網頁放了一張320 x 356 pixels的圖,預設的情況下,viewport width會是980pixels,顯示如下:viewport default width 980 pixels

#2同樣網頁有一張320 x 356 pixels的圖,將viewport width設為320pixels、scale設為1.0,顯示如下(佔滿):
viewport with width set to 320 pixels

#3同樣網頁有一張320 x x356 pixels的圖,將viewport width設為320pixels、scale設為1.5,顯示如下(放大1.5倍):
Viewport with width set to 320 and scale set to 150%

#4同樣網頁有一張320 x 356 pixels的圖,將viewport width設為320pixels、scale設為0.5,顯示如下(縮小0.5倍,並以白色填滿):
Viewport with width set to 320 and scale set to 50%

#5使用者在做任何zoom in或zoom out等操作手勢時,會改變的是viewport的scale,並不會改變viewport的size:如下顯示:
Viewport with arbitrary user scale

viewport在ios Safari瀏覽器上可能會大於或小於可視區域(visible area),而iPhone及iPod touch的可視區域直擺為320 x 356pixels、橫擺為480 x 208pixels。如左圖各種狀況顯示。

 

使用Viewport Meta Tag

<!-- 設定viewport width等於device的寬度 -->
<meta name="viewport" content="width=device-width">
<!-- 設定初始縮放(scale)為1.0 -->
<meta name="viewport" content="initial-scale=1.0">
<!-- 設定初始縮放(scale)為2.3,且關閉使用者的縮放功能 -->
<meta name="viewport" content="initial-scale=2.3, user-scalable=no">

改變Viewport width

如果設計的網頁寬度是590pixels,則左圖在iOS的Safari看起來就會較窄,所以最好將viewport width設為590pixels,就會像右圖一樣看起來符合版面:

<meta name="viewport" content="width=590">

Webpage is too narrow for default settings

 

也可將viewport width設為device-width

<meta name="viewport" content="width=device-width">

Web application page is too small for default settings

參考資料:
https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

[HTML] <article>與<section>

<article>元素用來組織一個獨立的內容區域,例如部落格文章、雜誌頁面的每篇文章。

原文:The <article> tag specifies independent, self-contained content.
An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.
​Potential sources for the <article> element:Forum post、Blog post、News story、Comment. (資料來源)


<section>元素代表一般性的區域,例如部落格文章分成好幾個一般區域、網站也可分成好幾個一般性的組成區域。

原文:The <section> tag defines sections in a document. Such as chapters, headers, footers, or any other sections of the document. (資料來源)


#1:將一個網頁分成好幾個一般性的組成區域(但不是很好的方式)

section排版

#2:將範例1改成較好的方式,並結合<article>

article與其它標籤的結合

以上有比較瞭解差異了嗎?<article>想像成是一篇部落格文章的話,裡面也可分成各一般性的區域(<section>即可派上用場)。

參考資料:
http://www.htmldog.com/guides/html/intermediate/sectioning/
http://www.w3schools.com/tags/tag_section.asp
http://www.w3schools.com/tags/tag_article.asp