天天看點
傳回

HTML5和CSS3新特性一覽HTML5和CSS3新特性一覽

HTML5和CSS3新特性一覽

HTML5

1.HTML5 新元素

HTML5提供了新的元素來建立更好的頁面結構：

标簽 描述
<article> 定義頁面獨立的内容區域。
<aside> 定義頁面的側邊欄内容。
<bdi> 允許您設定一段文本，使其脫離其父元素的文本方向設定。
<command> 定義指令按鈕，比如單選按鈕、複選框或按鈕
<details> 用于描述文檔或文檔某個部分的細節
<dialog> 定義對話框，比如提示框
<summary> 标簽包含 details 元素的标題
<figure> 規定獨立的流内容（圖像、圖表、照片、代碼等等）。
<figcaption> 定義 <figure> 元素的标題
<footer> 定義 section 或 document 的頁腳。
<header> 定義了文檔的頭部區域
<mark> 定義帶有記号的文本。
<meter> 定義度量衡。僅用于已知最大和最小值的度量。
<nav> 定義導航連結的部分。
<progress> 定義任何類型的任務的進度。
<ruby> 定義 ruby 注釋（中文注音或字元）。
<rt> 定義字元（中文注音或字元）的解釋或發音。
<rp> 在 ruby 注釋中使用，定義不支援 ruby 元素的浏覽器所顯示的内容。
<section> 定義文檔中的節（section、區段）。
<time> 定義日期或時間。
<wbr> 規定在文本中的何處适合添加換行符。

2.HTML5 Canvas

HTML5 <canvas> 元素用于圖形的繪制，通過腳本 (通常是JavaScript)來完成.

<canvas> 标簽隻是圖形容器，您必須使用腳本來繪制圖形。

  1. <canvas>簡單執行個體如下:

  2. <canvasid="myCanvas"width="200"height="100"></canvas>

使用 JavaScript 來繪制圖像

canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 内部完成：

  1. <script>

  2. var c=document.getElementById("myCanvas");

  3. var ctx=c.getContext("2d");

  4. ctx.fillStyle="#FF0000";

  5. ctx.fillRect(0,0,150,75);

  6. </script>

3.HTML5 拖放

 拖放是一種常見的特性，即抓取對象以後拖到另一個位置。在 HTML5 中，拖放是标準的一部分，任何元素都能夠拖放。

設定元素為可拖放

首先，為了使元素可拖動，把 draggable 屬性設定為 true ：

  1. <imgdraggable="true">

拖動什麼 - ondragstart 和 setData()

放到何處 - ondragover

進行放置 - ondrop

4.HTML5 地理定位

 HTML5 Geolocation API 用于獲得使用者的地理位置。

鑒于該特性可能侵犯使用者的隐私，除非使用者同意，否則使用者位置資訊是不可用的。

  1. <script>

  2. var x=document.getElementById("demo");

  3. function getLocation()

  4. {

  5. if(navigator.geolocation)

  6. {

  7. navigator.geolocation.getCurrentPosition(showPosition);

  8. }

  9. else{x.innerHTML="該浏覽器不支援擷取地理位置。";}

  10. }

  11. function showPosition(position)

  12. {

  13. x.innerHTML="Latitude: "+ position.coords.latitude +

  14. "<br>Longitude: "+ position.coords.longitude;

  15. }

  16. </script>

5.HTML5  Audio(音頻)、Video(視訊)

 HTML5 規定了在網頁上嵌入音頻元素的标準，即使用 <audio> 元素。

  1. <audiocontrols>

  2. <sourcesrc="horse.ogg"type="audio/ogg">

  3. <sourcesrc="horse.mp3"type="audio/mpeg">

  4. 您的浏覽器不支援 audio 元素。

  5. </audio>

 HTML5 規定了一種通過 video 元素來包含視訊的标準方法。

  1. <videowidth="320"height="240"controls>

  2. <sourcesrc="movie.mp4"type="video/mp4">

  3. <sourcesrc="movie.ogg"type="video/ogg">

  4. 您的浏覽器不支援Video标簽。

  5. </video>

6.HTML5 Input 類型

 HTML5 擁有多個新的表單輸入類型。這些新特性提供了更好的輸入控制和驗證。

  • color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week

  1. <inputtype="range"name="points"min="1"max="10">

  2. Search Google: <inputtype="search"name="googlesearch">

  3. 電話号碼: <inputtype="tel"name="usrtel">

7.HTML5 表單元素

 HTML5 有以下新的表單元素:

<datalist> <input>标簽定義選項清單。請與 input 元素配合使用該元素，來定義 input 可能的值。
<keygen> ><keygen> 标簽規定用于表單的密鑰對生成器字段。
<output> <output> 标簽定義不同類型的輸出，比如腳本的輸出。

 <datalist> 元素規定輸入域的選項清單。

<datalist> 屬性規定 form 或 input 域應該擁有自動完成功能。當使用者在自動完成域中開始輸入時，浏覽器應該在該域中顯示填寫的選項：

使用 <input> 元素的清單屬性與 <datalist> 元素綁定.

  1. <inputlist="browsers">

  2. <datalistid="browsers">

  3. <optionvalue="Internet Explorer">

  4. <optionvalue="Firefox">

  5. <optionvalue="Chrome">

  6. <optionvalue="Opera">

  7. <optionvalue="Safari">

  8. </datalist>

8.HTML5 表單屬性

 HTML5 的 <form> 和 <input>标簽添加了幾個新屬性.

<form>新屬性：

  • autocomplete、novalidate

<input>新屬性：

  • autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height and width、list、min and max、multiple、pattern (regexp)、placeholder、required、step

9.HTML5 語義元素

 HTML5提供了新的語義元素來明确一個Web頁面的不同部分:

HTML5和CSS3新特性一覽HTML5和CSS3新特性一覽

10.HTML5 Web 存儲

 Web Storage DOM API 為Web應用提供了一個能夠替代cookie的Javascript解決方案

  • sessionStorage—用戶端資料存儲，隻能維持在目前會話範圍内。

             sessionStorage 方法針對一個 session 進行資料存儲。當使用者關閉浏覽器視窗後，資料會被删除。

  • localStorage—用戶端資料存儲，能維持在多個會話範圍内。

             localStorage 對象存儲的資料沒有時間限制。第二天、第二周或下一年之後，資料依然可用。

對于大量複雜資料結構，一般使用IndexDB

11.HTML5 離線Web應用（應用程式緩存）

 HTML5 引入了應用程式緩存，這意味着 web 應用可進行緩存，并可在沒有網際網路連接配接時進行通路。

應用程式緩存為應用帶來三個優勢：

  1. 離線浏覽 - 使用者可在應用離線時使用它們
  2. 速度 - 已緩存資源加載得更快
  3. 減少伺服器負載 - 浏覽器将隻從伺服器下載下傳更新過或更改過的資源。

HTML5 Cache Manifest 執行個體

下面的例子展示了帶有 cache manifest 的 HTML 文檔（供離線浏覽）：

  1. <!DOCTYPE HTML>

  2. <htmlmanifest="demo.appcache">

  3. <body>

  4. The content of the document......

  5. </body>

  6. </html>

Manifest 檔案

manifest 檔案是簡單的文本檔案，它告知浏覽器被緩存的内容（以及不緩存的内容）。

manifest 檔案可分為三個部分：

  • CACHE MANIFEST - 在此标題下列出的檔案将在首次下載下傳後進行緩存
  • NETWORK - 在此标題下列出的檔案需要與伺服器的連接配接，且不會被緩存
  • FALLBACK - 在此标題下列出的檔案規定當頁面無法通路時的回退頁面（比如 404 頁面

    1. CACHE MANIFEST

    2. # 2012-02-21 v1.0.0

    3. /theme.css

    4. /logo.gif

    5. /main.js

    6. NETWORK:

    7. login.php

    8. FALLBACK:

    9. /html/ /offline.html

12.HTML5 Web Workers

 當在 HTML 頁面中執行腳本時，頁面的狀态是不可響應的，直到腳本已完成。

web worker 是運作在背景的 JavaScript，獨立于其他腳本，不會影響頁面的性能。您可以繼續做任何願意做的事情：點選、選取内容等等，而此時 web worker 在背景運作。（相當于實作多線程并發）

13.HTML5 SSE

 Server-Sent 事件指的是網頁自動擷取來自伺服器的更新。

以前也可能做到這一點，前提是網頁不得不詢問是否有可用的更新。通過伺服器發送事件，更新能夠自動到達。

例子：Facebook/Twitter 更新、估價更新、新的博文、賽事結果等。

EventSource 對象用于接收伺服器發送事件通知：

  1. var source=newEventSource("demo_sse.php");

  2. source.onmessage=function(event)

  3. {

  4. document.getElementById("result").innerHTML+=event.data +"<br>";

  5. };

為了讓上面的例子可以運作，您還需要能夠發送資料更新的伺服器（比如 PHP 和 ASP）。

  1. <?php

  2. header('Content-Type: text/event-stream');

  3. header('Cache-Control: no-cache');

  4. $time = date('r');

  5. echo "data: The server time is: {$time}nn";

  6. flush();

  7. ?>

14.HTML5 WebSocket

 WebSocket是HTML5開始提供的一種在單個 TCP 連接配接上進行全雙工通訊的協定。在WebSocket API中，浏覽器和伺服器隻需要做一個握手的動作，然後，浏覽器和伺服器之間就形成了一條快速通道。兩者之間就直接可以資料互相傳送。浏覽器通過 JavaScript 向伺服器發出建立 WebSocket 連接配接的請求，連接配接建立以後，用戶端和伺服器端就可以通過 TCP 連接配接直接交換資料。當你擷取 Web Socket 連接配接後，你可以通過 send() 方法來向伺服器發送資料，并通過 onmessage 事件來接收伺服器傳回的資料。以下 API 用于建立 WebSocket 對象。

CSS3

CSS3選擇器

選擇器 示例 示例說明 CSS
.class .intro 選擇所有class="intro"的元素 1
#id #firstname 選擇所有id="firstname"的元素
* 選擇所有元素 2
element p 選擇所有<p>元素
element,element div,p 選擇所有<div>元素和<p>元素
element element div p 選擇<div>元素内的所有<p>元素
element>element div>p 選擇所有父級是 <div> 元素的 <p> 元素
element+element div+p 選擇所有緊接着<div>元素之後的<p>元素
[attribute] [target] 選擇所有帶有target屬性元素
[attribute=value] [target=-blank] 選擇所有使用target="-blank"的元素
[attribute~=value] [title~=flower] 選擇标題屬性包含單詞"flower"的所有元素
[attribute|=language] [lang|=en] 選擇一個lang屬性的起始值="EN"的所有元素
:link a:link 選擇所有未通路連結
:visited a:visited 選擇所有通路過的連結
:active a:active 選擇活動連結
:hover a:hover 選擇滑鼠在連結上面時
:focus input:focus 選擇具有焦點的輸入元素
:first-letter p:first-letter 選擇每一個<P>元素的第一個字母
:first-line p:first-line 選擇每一個<P>元素的第一行
:first-child p:first-child 指定隻有當<p>元素是其父級的第一個子級的樣式。
:before p:before 在每個<p>元素之前插入内容
:after p:after 在每個<p>元素之後插入内容
:lang(language) p:lang(it) 選擇一個lang屬性的起始值="it"的所有<p>元素
element1~element2 p~ul 選擇p元素之後的每一個ul元素 3
[attribute^=value] a[src^="https"] 選擇每一個src屬性的值以"https"開頭的元素
[attribute$=value] a[src$=".pdf"] 選擇每一個src屬性的值以".pdf"結尾的元素
[attribute*=value] a[src*="44lan"] 選擇每一個src屬性的值包含子字元串"44lan"的元素
:first-of-type p:first-of-type 選擇每個p元素是其父級的第一個p元素
:last-of-type p:last-of-type 選擇每個p元素是其父級的最後一個p元素
:only-of-type p:only-of-type 選擇每個p元素是其父級的唯一p元素
:only-child p:only-child 選擇每個p元素是其父級的唯一子元素
:nth-child(n) p:nth-child(2) 選擇每個p元素是其父級的第二個子元素
:nth-last-child(n) p:nth-last-child(2) 選擇每個p元素的是其父級的第二個子元素，從最後一個子項計數
:nth-of-type(n) p:nth-of-type(2) 選擇每個p元素是其父級的第二個p元素
:nth-last-of-type(n) p:nth-last-of-type(2) 選擇每個p元素的是其父級的第二個p元素，從最後一個子項計數
:last-child p:last-child 選擇每個p元素是其父級的最後一個子級。
:root 選擇文檔的根元素
:empty p:empty 選擇每個沒有任何子級的p元素（包括文本節點）
:target #news:target 選擇目前活動的#news元素（包含該錨名稱的點選的URL）
:enabled input:enabled 選擇每一個已啟用的輸入元素
:disabled input:disabled 選擇每一個禁用的輸入元素
:checked input:checked 選擇每個選中的輸入元素
:not(selector) :not(p) 選擇每個并非p元素的元素
::selection 比對元素中被使用者選中或處于高亮狀态的部分
:out-of-range 比對值在指定區間之外的input元素
:in-range 比對值在指定區間之内的input元素
:read-write 用于比對可讀及可寫的元素
:read-only 用于比對設定 "readonly"（隻讀） 屬性的元素
:optional 用于比對可選的輸入元素
:required 用于比對設定了 "required" 屬性的元素
:valid 用于比對輸入值為合法的元素
:invalid 用于比對輸入值為非法的元素

CSS3 邊框（Borders）

 用CSS3，你可以建立圓角邊框，添加陰影框，并作為邊界的形象而不使用設計程式

屬性 說明
border-image 設定所有邊框圖像的速記屬性。
border-radius 一個用于設定所有四個邊框- *-半徑屬性的速記屬性
box-shadow 附加一個或多個下拉框的陰影

  1. div

  2. {

  3. border:2px solid;

  4. border-radius:25px;

  5. box-shadow:10px10px5px#888888;

  6. border-image:url(border.png)3030 round;

  7. }

CSS3 背景

 CSS3中包含幾個新的背景屬性，提供更大背景元素控制。

順序
background-clip 規定背景的繪制區域。
background-origin 規定背景圖檔的定位區域。
background-size 規定背景圖檔的尺寸。

  1. div

  2. {

  3. background:url(img_flwr.gif);

  4. background-repeat:no-repeat;

  5. background-size:100%100%;

  6. background-origin:content-box;

  7. }

多背景

  1. body

  2. {

  3. background-image:url(img_flwr.gif),url(img_tree.gif);

  4. }

CSS3 漸變

CSS3 定義了兩種類型的漸變（gradients）：

  • 線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向

    1. background: linear-gradient(direction, color-stop1, color-stop2,...);
  • 徑向漸變（Radial Gradients）- 由它們的中心定義

    1. background: radial-gradient(center, shape size, start-color,...,last-color);

CSS3 文本效果

hanging-punctuation 規定标點字元是否位于線框之外。
punctuation-trim 規定是否對标點字元進行修剪。
text-align-last 設定如何對齊最後一行或緊挨着強制換行符之前的行。
text-emphasis 向元素的文本應用重點标記以及重點标記的前景色。
text-justify 規定當 text-align 設定為 "justify" 時所使用的對齊方法。
text-outline 規定文本的輪廓。
text-overflow 規定當文本溢出包含元素時發生的事情。
text-shadow 向文本添加陰影。
text-wrap 規定文本的換行規則。
word-break 規定非中日韓文本的換行規則。
word-wrap 允許對長的不可分割的單詞進行分割并換行到下一行。

CSS3 字型

 以前CSS3的版本，網頁設計師不得不使用使用者計算機上已經安裝的字型。使用CSS3，網頁設計師可以使用他/她喜歡的任何字型。當你發現您要使用的字型檔案時，隻需簡單的将字型檔案包含在網站中，它會自動下載下傳給需要的使用者。您所選擇的字型在新的CSS3版本有關于@font-face規則描述。您"自己的"的字型是在 CSS3 @font-face 規則中定義的。

  1. <style>

  2. @font-face

  3. {

  4. font-family: myFirstFont;

  5. src: url(sansation_light.woff);

  6. }

  7. div

  8. {

  9. font-family:myFirstFont;

  10. }

  11. </style>

CSS3 轉換和變形

2D新轉換屬性

以下列出了所有的轉換屬性:

Property
transform 适用于2D或3D轉換的元素
transform-origin 允許您更改轉化元素位置

2D 轉換方法

函數
matrix(n,n,n,n,n,n) 定義 2D 轉換，使用六個值的矩陣。
translate(x,y) 定義 2D 轉換，沿着 X 和 Y 軸移動元素。
translateX(n) 定義 2D 轉換，沿着 X 軸移動元素。
translateY(n) 定義 2D 轉換，沿着 Y 軸移動元素。
scale(x,y) 定義 2D 縮放轉換，改變元素的寬度和高度。
scaleX(n) 定義 2D 縮放轉換，改變元素的寬度。
scaleY(n) 定義 2D 縮放轉換，改變元素的高度。
rotate(angle) 定義 2D 旋轉，在參數中規定角度。
skew(x-angle,y-angle) 定義 2D 傾斜轉換，沿着 X 和 Y 軸。
skewX(angle) 定義 2D 傾斜轉換，沿着 X 軸。
skewY(angle) 定義 2D 傾斜轉換，沿着 Y 軸。

3D轉換屬性

下表列出了所有的轉換屬性：

向元素應用 2D 或 3D 轉換。
允許你改變被轉換元素的位置。
transform-style 規定被嵌套元素如何在 3D 空間中顯示。
perspective 規定 3D 元素的透視效果。
perspective-origin 規定 3D 元素的底部位置。
backface-visibility 定義元素在不面對螢幕時是否可見。

3D 轉換方法

matrix3d(n,n,n,n,n,n,

n,n,n,n,n,n,n,n,n,n)

 定義 3D 轉換，使用 16 個值的 4x4 矩陣。
translate3d(x,y,z) 定義 3D 轉化。
translateX(x) 定義 3D 轉化，僅使用用于 X 軸的值。
translateY(y) 定義 3D 轉化，僅使用用于 Y 軸的值。
translateZ(z) 定義 3D 轉化，僅使用用于 Z 軸的值。
scale3d(x,y,z) 定義 3D 縮放轉換。
scaleX(x) 定義 3D 縮放轉換，通過給定一個 X 軸的值。
scaleY(y) 定義 3D 縮放轉換，通過給定一個 Y 軸的值。
scaleZ(z) 定義 3D 縮放轉換，通過給定一個 Z 軸的值。
rotate3d(x,y,z,angle) 定義 3D 旋轉。
rotateX(angle) 定義沿 X 軸的 3D 旋轉。
rotateY(angle) 定義沿 Y 軸的 3D 旋轉。
rotateZ(angle) 定義沿 Z 軸的 3D 旋轉。
perspective(n) 定義 3D 轉換元素的透視視圖。

CSS3 過渡

過渡屬性

下表列出了所有的過渡屬性:

transition 簡寫屬性，用于在一個屬性中設定四個過渡屬性。
transition-property 規定應用過渡的 CSS 屬性的名稱。
transition-duration 定義過渡效果花費的時間。預設是 0。
transition-timing-function 規定過渡效果的時間曲線。預設是 "ease"。
transition-delay 規定過渡效果何時開始。預設是 0。

  1. div

  2. {

  3. transition-property: width;

  4. transition-duration:1s;

  5. transition-timing-function: linear;

  6. transition-delay:2s;

  7. /* Safari */

  8. -webkit-transition-property:width;

  9. -webkit-transition-duration:1s;

  10. -webkit-transition-timing-function:linear;

  11. -webkit-transition-delay:2s;

  12. }

CSS3 動畫

 要建立CSS3動畫，你需要了解@keyframes規則。@keyframes規則是建立動畫。 @keyframes規則内指定一個CSS樣式和動畫将逐漸從目前的樣式更改為新的樣式。

執行個體

當動畫為 25% 及 50% 時改變背景色，然後當動畫 100% 完成時再次改變：

  1. @keyframes myfirst

  2. {

  3. 0%{background: red;}

  4. 25%{background: yellow;}

  5. 50%{background: blue;}

  6. 100%{background: green;}

  7. }

下面的表格列出了 @keyframes 規則和所有動畫屬性：

@keyframes 規定動畫。
animation 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
animation-name 規定 @keyframes 動畫的名稱。
animation-duration 規定動畫完成一個周期所花費的秒或毫秒。預設是 0。
animation-timing-function 規定動畫的速度曲線。預設是 "ease"。
animation-delay 規定動畫何時開始。預設是 0。
animation-iteration-count 規定動畫被播放的次數。預設是 1。
animation-direction 規定動畫是否在下一周期逆向地播放。預設是 "normal"。
animation-play-state 規定動畫是否正在運作或暫停。預設是 "running"。

  1. div

  2. {

  3. animation-name: myfirst;

  4. animation-duration:5s;

  5. animation-timing-function: linear;

  6. animation-delay:2s;

  7. animation-iteration-count: infinite;

  8. animation-direction: alternate;

  9. animation-play-state: running;

  10. /* Safari and Chrome: */

  11. -webkit-animation-name: myfirst;

  12. -webkit-animation-duration:5s;

  13. -webkit-animation-timing-function: linear;

  14. -webkit-animation-delay:2s;

  15. -webkit-animation-iteration-count: infinite;

  16. -webkit-animation-direction: alternate;

  17. -webkit-animation-play-state: running;

  18. }

CSS3 多列

下表列出了所有 CSS3 的多列屬性：

column-count 指定元素應該被分割的列數。
column-fill 指定如何填充列
column-gap 指定列與列之間的間隙
column-rule 所有 column-rule-* 屬性的簡寫
column-rule-color 指定兩列間邊框的顔色
column-rule-style 指定兩列間邊框的樣式
column-rule-width 指定兩列間邊框的厚度
column-span 指定元素要跨越多少列
column-width 指定列的寬度
columns 設定 column-width 和 column-count 的簡寫

CSS3 盒模型

 在 CSS3 中, 增加了一些新的使用者界面特性來調整元素尺寸，框尺寸和外邊框，主要包括以下使用者界面屬性：

  • resize：none | both | horizontal | vertical | inherit
  • box-sizing: content-box | border-box | inherit
  • outline:outline-color outline-style outline-width outine-offset

resize屬性指定一個元素是否應該由使用者去調整大小。

box-sizing 屬性允許您以确切的方式定義适應某個區域的具體内容。

outline-offset 屬性對輪廓進行偏移，并在超出邊框邊緣的位置繪制輪廓。

CSS3伸縮布局盒模型(彈性盒)

 CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面需要适應不同的螢幕大小以及裝置類型時確定元素擁有恰當的行為的布局方式。

引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和配置設定空白空間。

 下表列出了在彈性盒子中常用到的屬性:

display 指定 HTML 元素盒子類型。
flex-direction 指定了彈性容器中子元素的排列方式
justify-content 設定彈性盒子元素在主軸（橫軸）方向上的對齊方式。
align-items 設定彈性盒子元素在側軸（縱軸）方向上的對齊方式。
flex-wrap 設定彈性盒子的子元素超出父容器時是否換行。
align-content 修改 flex-wrap 屬性的行為，類似 align-items, 但不是設定子元素對齊，而是設定行對齊
flex-flow flex-direction 和 flex-wrap 的簡寫
order 設定彈性盒子的子元素排列順序。
align-self 在彈性子元素上使用。覆寫容器的 align-items 屬性。
flex 設定彈性盒子的子元素如何配置設定空間。

CSS3 多媒體查詢

從 CSS 版本 2 開始，就可以通過媒體類型在 CSS 中獲得媒體支援。如果您曾經使用過列印樣式表，那麼您可能已經使用過媒體類型。清單 1 展示了一個示例。

清單 1. 使用媒體類型

  1. <linkrel="stylesheet"type="text/css"href="site.css"media="screen"/>

  2. <linkrel="stylesheet"type="text/css"href="print.css"media="print"/>

清單 2. 媒體查詢規則

  1. @media all and(min-width:800px){...}

  • @media all

      是媒體類型，也就是說，将此 CSS 應用于所有媒體類型。

  • (min-width:800px)

      是包含媒體查詢的表達式，如果浏覽器的最小寬度為 800 像素，則會告訴浏覽器隻運用下列 CSS。

清單 3. 

and

 條件

  1. @media(min-width:800px)and(max-width:1200px)and(orientation:portrait){...}

清單 4. 

or

 關鍵詞

  1. @media(min-width:800px)or(orientation:portrait){...}

清單 5. 使用 

not

  1. @media(not min-width:800px){...}

原文釋出時間：2018-6-19

原文作者：杜媛媛

本文來源

csdn部落格

如需轉載請緊急聯系作者

Web App開發 機器學習/深度學習 前端開發 html5 容器 效果html css html5 css html5 css樣式 html5新特性移除 html5 css圖檔
上一篇: 2018 年，我們該如何使用 JavaScript？
下一篇: 5 種JavaScript編碼規範

繼續閱讀