瀏覽器兼容性紀錄 (單位、font、CSS 設定、RWD media)

發表於 | 更新於 | 分類於 | 評論數：

紀錄一些不同瀏覽器的做法

目的：解決不同瀏覽器的樣式衝突

CSS Hack

  • 就是指利用不同瀏覽器的一些特殊屬性(非W3C標準)，來對不同瀏覽器進行設定，以達到前台視覺上統一的一種小技巧
  • 無法通過 W3C驗證， 若要使用 CSS Hack 來統一各瀏覽器之間的差異，把他當成是網頁設計時最後的手段
  • 主要分成兩種類型
    • 樣式屬性的密技 ( Attribute Hacks )
    • 選取器的密技 ( Selector Hacks )

樣式屬性的密技 ( Attribute Hacks )

  • 順序性非常重要，比較晚定義的樣式會取代較早定義的樣式，必須把最多瀏覽器版本看的懂的樣式寫在比較上面，這樣才能達到 CSS Hack 的效果
1
2
3
4
5
6
.page {
   color: black;        /* 所有瀏覽器 */
   color /**/: yellow;  /* IE7, IE8, IE9 */
   *color: blue;        /* IE6, IE7 */
   _color: red;         /* IE6 */
 }
樣式屬性的密技 符號 example
IE6 底線 ( _ ) #style { _color: red }
IE6, IE7 星號 ( * ) ｜井號 ( # ) #style { *color: red } ｜#style { #color: red }
IE7, IE8, IE9 空白與一個註解 ( /**/ ) #style { color /**/: red }
IE6, IE7, IE8, IE9 \9 字串 #style { color: red\9 }
IE8, IE9 \0/ 字串 #style {color: red\0/}

選取器的密技 ( Selector Hacks )

  • autoprefixer - 加入各家瀏覽器的前綴詞（prefix）
    • -webkit- Chrome 與 Safari 正是用核心
    • -moz- 則是 Mozilla 公司的縮寫(Gecko核心)，代表瀏覽器為Firefox
    • -o- 是 Opera 瀏覽器的縮寫(Presto核心)
    • -ms- 微軟的縮寫代表瀏覽器是 IE
1
2
3
4
5
6
7
.class{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

IE 條件式註解

  • 該功能只能用於 IE9 以下的瀏覽器裡
  • 讓 IE 根據判斷的語法，來決定要不要執行註解中的內容，而其他的瀏覽器例如(Firefox,Google Chome,Safari…)都還是一樣視為註解，來達到區分 IE 瀏覽器版本及不同瀏覽器的效果
  • 利用 html 的註解形式，在註解中加入一些判斷的語法
1
2
3
4
5
6
7
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class=“no ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no"> <!--<![endif]-->
<head>
  • 可以用來載入不同的 CSS 檔
1
2
3
4
<!--[if lte IE 9]><link rel="stylesheet" href="lte-ie-9.css"><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="lte-ie-8.css"><![endif]-->
<!--[if lte IE 7]><link rel="stylesheet" href="lte-ie-7.css"><![endif]-->
<!--[if lte IE 6]><link rel="stylesheet" href="lte-ie-6.css"><![endif]—>
  • 透過條件式類別名稱的技巧，CSS 內容可以寫成這樣，也可以有效避免使用 CSS Hacks
1
2
3
4
.style { color: black; }       /* 所有瀏覽器 */
.ie8 .style { color: yellow; } /* IE8 */
.ie7 .style { color: blue; }   /* IE7 */
.ie6 .style { color: red; }    /* IE6 */
參數 說明
if 是或不是
lt less-than，版本小於，例如 [if lt IE 7] 表示版本小於 IE7，不包含 IE7
lte than or equal，版本小於或等於，例如 [if lte IE 7] 表示版本小於IE7，包含 IE7
gt greater-than，版本大於，例如 [if gt IE 7] 表示版本大於 IE7，不包含 IE7
gte greater-than or equal，版本大於或等於，例如 [if gte IE 7] 表示版本大於 IE7，包含 IE7
! NOT，否定的意思，例如 [if !IE7] 表示不是 IE7
& AND，且的意思，例如 [if (gt IE 7)&(lt IE 9)]，表示要大於 IE7 且小於 IE9
｜ OR，或的意思，例如 [if (IE 6)｜(IE 7)]，表示 IE6 或 IE7 都會符合條件

不同單位

可參考 -> https://codepen.io/Jimmywei01/pen/wbpeqd?editors=1100

  • px：絕對單位，代表螢幕中每個「點」( pixel )
    • 縮放螢幕的時候，不會隨著變動
    • 多大 px 字體就會多大
1
2
3
4
5
6
7
8
9
<div class="a" style="font-size:16px;">16px
    <div style="font-size:20px;">20px
        <div style="font-size:24px;">24px
            <div style="font-size:16px;">16px
                <div style="font-size:32px;">32px</div>
            </div>
        </div>
    </div>
</div>
  • em：相對單位，每個子元素透過「倍數」乘以父元素的 px 值
    • 每一個 div 都從它上一級父元素繼承了字體大小，並且逐漸增加
    • 最內層是 16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px
1
2
3
4
5
6
7
8
9
<div style="font-size:1.2em;">1.2em
    <div style="font-size:1.2em;">1.2em
        <div style="font-size:1.2em;">1.2em
            <div style="font-size:1.2em;">1.2em
                <div style="font-size:1.2em;">1.2em</div>
            </div>
        </div>
    </div>
</div>
  • rem：相對單位，每個元素透過「倍數」乘以根元素的 px 值
    • 1rem 等於根元素的字體大小
    • 最內層是 16px x 1.2 = 19.2px
  • rem 單位在不同螢幕比例都適用
    • 設定在 html 元素下 font-size 的根元素 px 值當預設值
    • 如何確認 1rem 等於多少 px？
      • 因為 css 是不會幫忙計算 1rem 是多少 px 的，只能通過自己來計算
  • 計算方式：
    • 假設情境
      • 有一個設計稿 A（ 640*1136 px )，預設的 rem 和 px 的比例 B（ font-size 為10px 即 1rem=10px )，假設切 480px 的圖要放入 320px 總共需要多少 rem ？
    • 公式
      • clientWidth 1rem = 預設 font-size * (clientWidth / 設計稿 width) + ‘px’;
      • clientWidth 內設計圖要切的內容尺寸 rem = 設計圖要切的內容尺寸 px / clientWidth 1rem
    • 解
      • 320px 1rem = 10 * ( 320 / 640 ) +’px’ = 5px
      • 320px 內 480px 圖要切的內容尺寸 rem = 480 / 5 = 96 rem 
1
2
3
4
5
6
7
8
9
<div style="font-size:1.2rem;">1.2rem
    <div style="font-size:1.2rem;">1.2rem
        <div style="font-size:1.2rem;">1.2rem
            <div style="font-size:1.2rem;">1.2rem
                <div style="font-size:1.2rem;">1.2rem</div>
            </div>
        </div>
    </div>
</div>
  • %：相對單位，每個子元素透過「百分比」乘以父元素的 px 值
    • 和 em 大同小異
    • 最內層是 16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px
1
2
3
4
5
6
7
8
9
<div style="font-size:120%;">120%
    <div style="font-size:120%;">120%
        <div style="font-size:120%;">120%
            <div style="font-size:120%;">120%
                <div style="font-size:120%;">120%</div>
            </div>
        </div>
    </div>
</div>

title

  • vh/vm

    • 設計自適應性網頁（RWD）時會希望圖片隨著螢幕的大小而改變，這時候我們就可以利用到這兩個新的單位
    • vh 代表的是 view height，也就是螢幕可視範圍高度的百分比，1vw = 視窗寬度的 1%
    • vw 表示的是 view width，也就是螢幕可是範圍寬度的百分比，1vh = 視窗高度的 1%
    • 1vw ＝ 1/100th viewport width

  • 如果填的是 30vh 和 30vw，表示這個 div 要占我的可視範圍 30%，因為它會隨著網頁縮放而改變

  • 這個方形的長度會隨著你的視窗而改變，是因為輸入的是 30%

title

  • vmin | vmax
    • vmin 意思是抓取「長或寬較小的那個的百分比」
    • vmax 意思是抓取「長或寬較大的那個的百分比」

font-family

  • 先找第一種字體，若不支援或沒有該字體，則採用第二種字體，依此類推，最後使用通用字
1
body{ font-family:第一種字體, 第二種字體, "第三種字體", "通用字"; }

引用外部字體方式

  • CSS link
1
<link href="外部字體超連結" rel="stylesheet">
  • @import
1
<style> @import url('外部字體超連結'); </style>
  • @font-face
1
<style> @font-face { font-family: 自定義名稱; src: url(字體檔超連結); } </style>

@font-face 使用方式

  • local 代表直接抓取使用者電腦中的字型檔
  • format 標記
    • 同一種字體但分為四種不同格式，format 標記用意在輔助瀏覽器識別，如果瀏覽器不支援該格式，將會直接跳過這個字體，省去下載字體檔案的時間
  • SVG 的字體，如果有標記 id 在其中，可在字體名稱後方加上 # 來指定特定 id 字體
  • 可以使用 font-weight、font-style 定義字體特性，讓瀏覽器在解析字體時，只下載有在網頁上被使用的字體檔
1
2
3
4
5
6
7
8
9
10
11
12
13
@font-face {
  font-family: ’自定義名稱';
  src: local(“Helvetica") ，
        url('../fonts/xxx.woff') format("woff"),
        url('../fonts/xxx.otf') format("opentype"),
        url('../fonts/xxx.eot') format("embedded-opentype”),
        url('../fonts/xxx.ttf') format('truetype'), 
        url('../fonts/xxx.svg#hi') format('svg’);
  font-weight: normal; 
  font-style: normal;
}

h1{ font-family:自定義名稱, serif; }
字型格式 副檔名 format( ) 瀏覽器支援
TrueType .ttf “truetype” 舊版 Android (4.4 版以下) 瀏覽器
WOFF .woff “woff” 大多數瀏覽器(包含chrome)在許多較舊的瀏覽器中無法使用
Embed OpenType .eot “embedded-opentype” 舊版 IE (IE9 之下) 瀏覽器
  • @font-face - unicode-range
    • 讓某些文字顯示不同字體
unicode-range 說明
U+316 單一字元
U+316-3FF 某個字元區間
U+3?? 某個 U+3 開頭的字元 ( U+300~3FF )
U+216-266, U+3?? 用逗號聯集不同區間 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@font-face { 
     font-family: font1; 
     src: url(KouzanBrushFont.ttf); 
     unicode-range: U+611B; 
} 

@font-face { 
     font-family: font2; 
     src: url("setofont.ttf"); 
     unicode-range: U+0057,U+0077; 
}

 h1 { 
    font-family: font1, font2, sans-serif;
    font-size: 50px; 
    font-weight: normal;
}

RWD 使用者體驗

  • 響應式無法讓所有螢幕解析度都最佳化
  • 遵循 80/20 法則，先兼容熱門瀏覽器
  • 動線設計：並非所有內容都要全部塞到網頁內容
  • 斷點時機：設計多欄式佈局的必要觀念
  • 點擊範圍：設計讓人好點選的元素
  • 少即是多：避免資訊量爆炸( 非全部塞滿 )
  • 載具特性：使用者行為 touch( 手機 click )、hover(手機體驗不好)
  • 不要習慣寫死高度
  • mobile first 與 desktop first 優先
    • mobile 寫法 @media (min-width: 768px)
    • desktop 寫法 @media (max-width: 768px)
    • 先做哪個版本，該版本就比較靈活，而被覆蓋後才產生出來的樣式就會因此而受限
  • mobil first 要建構良好的行動裝置操作體驗，有以下幾點要注意 :
    • 設計網站的時候要考量行動裝置但不是要從手機網站開始設計起，而是過程中要以手機為主要考量
    • 要符合使用者使用行動裝置的方式與動機 (行動中手機查資料、躺在床上滑平板)
    • 明確的內容比設計齊全的導覽功能更重要 (因為行動版的簡化導致更重要內容被刪除)
    • 提供設計良好的導覽選單，方便使用者閒逛或深入閱讀內容 (不要進網站找不到)

RWD 圖片設計

  • 不使用 width
    • 圖片堅持呈現原本寬度 ( 所以超出瀏覽器會出現 x 軸 )
  • 使用 max-width: 100%
    • 圖片保有自己的最大寬度，並自適應父容器 width 縮小
  • 圖片 size 規劃，刻意設計較大張一點的技巧
  • banner 設計 - 縮放圖片原理
    • 使用兩張圖
      • mobile 小張
      • desktop 大張
  • banner 或網頁中的圖片，呈現方式 :
    • 將圖片在 css 中用背景圖片的方式來呈現
    • 將圖片在 html 中用 img 放入圖片
  • 這兩種方法有什麼不同的適用時機或使用考量？
    • banner 如果裡面又有放字的話，要考量在手機上會不會過小，是否要把文字拆出來放，那這樣圖片用背景就比較適合，當然純 img 也可以，那就是用絕對定位來設計
    • 如果電子商務上面的產品列表，通常都是直接插入 img，畢竟你不可能在 css 放各種產品背景圖案，但也是有跟後端配合時 在 HTML 標籤上寫 style background ，最後在圖片上面插入文字
  • 怎麼做會比較適合，會依照
    • 文字是否要放在圖內 大小是否要改變
    • 圖片有無要設計兩種 size 以上(PC、Mobile)
    • 思考要怎麼跟後端配合，他要依照什麼規則在後台上圖，前台也會跟著正常
    • 最後再依照設計師提供給的設計稿來決定要怎麼開發 web layout

RWD 開發介紹

HTML - viewport

  • CSS 還是 CSS framework 開發，都要先加這一行
    • 加這一行的目的是要強迫網頁的內容，以裝置目前的寬度來做呈現，並禁止縮放( 手機與平板的解析度 不會等於載具寬度 )
1
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
  • viewport - 用戶網頁的顯示區域
  • content - 操作 viewport 
1
2
3
4
5
6
7
8
9
<meta name="viewport"
content="
height = [pixel_value | device-height] ,
width = [pixel_value | device-width ] ,
initial-scale = float_value ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = [yes | no] ,
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]"/>

  • viewport 的參數:

    • width：控制 viewport 的大小，可以指定的一個值或者特殊的值，如 device-width 為設備的寬度（單位為縮放為100% 時的 CSS 的像素）

    • height：和 width 相對應，指定高度

  • initial-scale：初始縮放
    • 一個浮點值，是頁面大小的一個乘數
    • 例如，如果設置初始縮放為 “1.0”，那麼，web 頁面在展現的時候就會以 target density 分辨率的 1:1 來展現
    • 如果設置為 “2.0”，那麼這個頁面就會放大為 2 倍。 (最小0.25，最大5)
  • minimum-scale：最小縮放 (最小0.25，最大5)
  • maximum-scale：最大縮放
    • 一個浮點值，用指出頁面大小與屏幕大小相比的最大乘數
    • 例如，如果將這個值設置為“2.0”，那麼這個頁面與 target size 相比，最多能放大2倍 (最小0.25，最大5)
  • user-scalable：用戶是否能改變頁面縮放程度
    • 如果設置為 yes 則是允許用戶對其進行改變，反之為 no, 默認值是 yes 如果設置為no，那麼 minimum-scale 和 maximum-scale 都將被忽略，因為根本不可能縮放( 1 或 0 (yes 或 no) )
  • target-densitydpi：一個屏幕像素密度是由屏幕分辨率決定的，通常定義為每英寸點的數量（dpi）
    • Android 支持三種屏幕像素密度：低像素密度，中像素密度，高像素密度
      • 一個低像素密度的屏幕每英寸上的像素點更少，而一個高像素密度的屏幕每英寸上的像素點更多
    • Android Browser 和 WebView 默認屏幕為中像素密度(160dpi)
  • target-densitydpi 的取值範圍:
    • device-dpi：使用設備原本的 dpi 作為目標 dpi，不會發生默認縮放
    • high-dpi：使用 hdpi 作為目標 dpi，中等像素密度和低像素密度設備相應縮小
    • medium-dpi：使用 mdpi 作為目標 dpi，高像素密度設備相應放大，像素密度設備相應縮小。這是默認的 target density
    • low-dpi：使用 mdp i作為目標 dpi，中等像素密度和高像素密度設備相應放大
    • value：指定一個具體的 dpi 值作為 target dpi，這個值的範圍必須在 70–400 之間

設置螢幕密度為高頻，中頻，低頻自動縮放，禁止用戶手動調整縮放：

1
2
3
4
5
6
<meta name="viewport" content="width=device-width,
 target-densitydpi=high-dpi,
 initial-scale=1.0,
 minimum-scale=1.0,
 maximum-scale=1.0,
  user-scalable=no"/>

CSS - Media Queries

1
2
3
4
5
6
7
8
9
@media and|or|not|only and (media feature) {
    CSS Code;
}

@media 媒體類型 and (條件)  {
.css {
      CSS  Code;  
    }
}
Value Description
all 全部
print 印表機
braille 點字機
screen 視窗螢幕大小
speech 語音合成器
  • Media Features
Value Description
width 視窗寬度
height 視窗高度
max-device-height 最大裝置高度
max-device-width 最大裝置寬度
max-height 最大高度
max-width 最大寬度
min-device-width 最小裝置寬度
min-device-height 最小裝置高度
min-height 最小高度
min-width 最小寬度
  • and
    • 使用者視窗寬度 <= 768px，將字體大小變為 20px
    • 使用者視窗寬度介於 768px ~ 992px，將字體大小變為 30px
    • 使用者視窗寬度 >= 1200px，將字體大小變為 40px
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@media screen and (max-width: 768px) {
.div1 {
    font-size: 20px;
  }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
.div1 {
    font-size: 30px;
  }    
}

@media screen and (min-width: 1200px) {
.div1 {
    font-size: 40px;
  }
}
  • or
    • 如果使用者視窗寬度在 XXXpx(含)以下，或 XXXpx(含)以上 將背景變為紅色
1
2
3
@media screen and (max-width: 600px), screen and (min-width: 800px) {
    div { background: red; }
}
  • not
    • 用來排除符合表達式的設備尺寸
1
2
3
@media not screen and (max-width: 600px) {
    div { background: red; }
}
  • only
    • 用來針對那些不支援 media queries 卻需要讀取 media type 的設備隱藏樣式用
1
2
3
4
5
6
@media only screen and (min-width:480px) {
    div { background: red; }
}

media queries 是 CSS3 對於 media type 的一個擴展
所以不支援 media queries 的瀏覽器還是要能識別 media type
  • 推薦撰寫方式
    • 使用 CSS media type 區分不同解析度，分別讀入不同 CSS 語法
1
2
3
<link href="/css/phone.css" rel="stylesheet" type="text/css"/>
<link href="/css/tablet.css" rel="stylesheet" type="text/css" />
<link href="/css/desktop.css" rel="stylesheet" type="text/css"/>

title

CSS - Fluid Grids

  • 網頁元素以方格式設計 (Grid Design) + 依照視窗大小縮放的流動佈局 (Liquid Layout)
    • Grid Design - 一般網頁 div 排版超過容器最大寬度, div 自動擠到下一行
    • float (clearfix 來消除 float 的效果)
    • inline-block
    • flex
  • Liquid Layout
    • 把原本用 px 單位製作的版面改成用 %, em, rem
  • PT
    • CSS pt 不等於 iOS pt ，其運作方式也不相同，所以不要放在一起
    • pt 這個單位詞，其實最早源自於傳統的鉛字印刷，是用來表示鉛字塊的尺寸 1 pt = 1/72 英吋
    • 而 CSS 之所以有 pt 這個單位，其實是要把網頁印刷/列印出來的時候用到的
  • Retina 螢幕的 iOS 單位 - pt (ppi)
    • 效果：設計稿尺寸 / 2，元素寬度使用百分比實現 ( 比如設計稿上的高度是 200px，則 CSS 中就是 height:100px)
    • 設計稿圖要兩倍大做使用
    • PPI = Pixels Per Inch
    • 紅點為了維持一樣的大小，他的長/寬就會各涵蓋到 2px，所以原本銀色機上 1pt 等於 1px ，但到了螢幕密度兩倍的地方， 1pt 的大小就會代表 2px

title

CSS - Fluid Image

  • 把原本的 px 單位換成 % ，然後達到依畫面尺寸縮放的功能
  • 要考慮圖片放大後失真 or 可能會有想要針對螢幕大小指定合適圖片的需求 (在設計圖片時把圖解析度設高)
  • RWD 顯示圖片的方式有兩種，一種是傳統 img 標籤，另一種是 CSS 的背景圖
    • 一般圖片 img 標籤，將 width 或 height 設 % 就可以了，另一個設為 auto
    • max-width : 100% 方式防止圖片大到糊掉
1
2
3
4
#banner {
    width: 100%; | max-width : 100%;
    height: auto;
}
  • 第二種是針對容器(如 div)使用背景圖片
    • 背景圖的方式可彌補 img 但無法針對螢幕大小指定合適圖片
1
2
3
4
5
6
7
#banner {
  width: 100%;
  height: 100px;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-image: url('banner.jpg');
}

Bootstrap - Fluid Grids

  • 12 欄 Grid System ，以 960px 為基準，因為早期電腦螢幕通常為 1024px，960px 的設計是最為剛好

title

  • 使用一組 .col-md- *網格類，可以創建一個基本的網格系統，將網格列放置在 .row 中

title

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 通過製作一個全寬和另一個半寬
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

// 移動設備上的列開始為50％，桌面上的列開始為33.3％
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

// 移動和桌面上的列寬50％
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>

Bootstrap - Media Queries

  • 當寬度超過該數值以上時會套⽤樣式
1
2
3
4
5
6
7
8
9
10
11
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Bootstrap - Fluid Image

  • bootstrap 要做到 fluid images 只要加上 class=”img-responsive”
  • img-responsive 這個 class 就是下面這幾個 CSS 組成
    • max-width: 100%;
    • height: auto;
    • display: block;
  • 如果要讓 class=”img-responsive” 的圖片置中可以使用 .center-block
0%