[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] viewport

通常,RWD 網站設定 viewport 如下:

<meta name="viewport" content="width=device-width, initial-scale=1">

 

user-scalable=no:關閉使用者的縮放功能,預設是yes

maximum-scale=2:表示使用者最多只能將頁面調整成全尺寸的兩倍大。而不能進一步再放大。若設定maximum-scale=1,表示使用者完全不能夠放大頁面。

[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文章頁面中闡述。

[css] youtube影片設計iframe RWD (iframe RWD with youtube iframe video)

1、css:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

html結構:

<div class="video-container">
<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>

參考資料:Responsive Youtube Embed

[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] 大圖縮小圖是行不通的

昨日因為要做一個簡單的logo,所以做了以下這張圖,大小為144px正方形,我用PS製作:
(原圖144px正方形)
apple-touch-icon-144                   

再來我想改成其它尺吋,以再特定用途時,可以切換不同尺吋的圖,所以從原圖(144px正方形)直接用更改圖片大小的方式,改成分別是114px正方形、72px正方形、57px正方形各自的圖檔來輸出:以下依序

(114px正方形)                                      (將左圖直接設定寬度至144px來顯示:方便觀查對照)
apple-touch-icon-114                                  apple-touch-icon-114

(72px正方形)                                        (將左圖直接設定寬度至144px來顯示:方便觀查對照)
apple-touch-icon-72                                             apple-touch-icon-72

(57px正方形)                                         (將左圖直接設定寬度至144px來顯示:方便觀查對照)
apple-touch-icon-57                                                  apple-touch-icon-57

發現:
1、字母、四周圓角在直接使用圖片縮尺吋的方式,開始有模糊、鋸齒狀出現。
2、色差上精緻度也被破壞掉。

所以我想還是要先設定好尺吋再重新製作才行、或者使用向量式類型的軟體來製作。
我不是視覺設計師,只是一些心得,分享給客倌們。