CSS3中添加的媒體查詢,允許內容的呈現針對一個特定范圍的輸出設備而定制,而不必改變內容本身。
Media Queries能在不同的條件下使用不同的樣式,使用頁面達到不同的渲染效果。
媒體類型
all 所有媒體
braille 盲文觸覺設備
embossed 盲文打印機
print 手持設備
projection 打印預覽
screen 彩屏設備
speech ‘聽覺’類似的媒體類型
tty 不適用像素的設備
tv 電視
媒體類型
sans - serif字體比較適合在屏幕上閱讀,而 serif 字體更容易在紙上閱讀。
媒體查詢包含一個可選的媒體類型和零個或多個滿足CSS3規范的表達式.
表達式描述了媒體特征, 最終會被解析為 true 或 false
如果媒體查詢中指定的媒體類型匹配展示文檔所使用的設備類型, 并且所有的表達式的值都是true, 那么該媒體查詢的結果為 true
邏輯操作符
可以使用 not , and 和 only 等邏輯操作符構建復雜的媒體查詢。
and 操作符用來把多個 媒體屬性 組合成一條媒體查詢。只有當每個屬性都為真時,結果才為真。
not 操作符用來對一條媒體查詢的結果進行取反。
only 操作符表示僅在媒體查詢匹配成功的情況下應用指定樣式。
若使用了 not 或 only 操作符,必須明確指定一個媒體類型。默認為 all 所有媒體類型。and 用于合并多個媒體屬性或合并媒體屬性與媒體類型
not 用來排除某種制定的媒體類型,換句話來說就是用于排除符合表達式的設備
only 僅在媒體查詢匹配成功的情況下應用指定樣式
語法
常用媒體屬性
設備寬度:device-width | min-device-width | max-device-width
設備高度:device-height | min-device-height | max-device-height
設備寬度比:device-aspect-ratio: 16/9
設備方向:orientation: portrait / landscape
設備輸出分辯率:min-resolution: 300dpi | min-resolution: 2dppx
屏幕像素比:min-device-pixel-ratio: 2 | min–moz-device-pixel-ratio | -webkit-min-device-pixel-ratio
渲染區域的寬度: width | min-width | max-width
渲染區域的高度: height | min-height | max-height
設備輸出分辯率(打印分辯率):dpi, dpcm, dppx
指定輸出設備的分辨率(像素密度)。分辨率可以用每英寸(dpi)或每厘米(dpcm)的點數來表示。
每英寸包含點的數量(dots per inch)
普通屏幕通常包含96dpi,一般將2倍于此的屏幕稱之為高分屏,即大于等于192dpi的屏幕,比如Mac視網膜屏就達到了192dpi(即2dppx),打印時一般會需要更大的dpi;
1dppx=96dpi
1dpi ≈ 0.39dpcm
1dpcm ≈ 2.54dpi
分辨率PPI與DPI
Media query只接受單個的邏輯表達式作為其值或者沒有值
Media Query其中的大部分接受min/max前綴,用來表示其邏輯關系,表示應用于大于等于或者小于等于某個值的情況著作權歸作者
橫豎屏的判斷
注意部分 Android 中有bug
當輸入框獲得焦點,觸發彈出鍵盤后,橫屏的樣式出現了,然而他使用的是豎屏,并未把手機橫過來。
添加寬度限制,屏幕寬度大于450px時,并且是橫屏時,應用橫屏樣式
高清圖片適配
在普通屏下使用@1x圖片,在高清屏下使用@2x圖片
屏幕適配
移動端配合 rem 使用,適配不同寬度的屏幕
適配獨立的樣式文件
設備判斷
調整模塊的樣式
ContentTools是一個美觀小巧的網頁內容工具(一個JS庫),具備所見即所得(WYSIWYG)的編輯器功能,只需幾個簡單的步驟,即可將ContentTools添加到任何HTML頁面。如下圖所示頁面通過實時ContentTool的彈出層實現實時編輯功能。用小而美來形容它最好不過了!
https://github.com/GetmeUK
ContentTools是用于HTML頁面的美觀小巧的內容編輯器。它被設計為:
ContentTools具有字體加粗、斜體、超鏈接、對齊、列表、表格、圖片、視頻、代碼、撤銷、重做、刪除等功能
1、加粗顯示
2、斜體顯示
3、超鏈接
4、H標題
5、正文
6、有序和無序列表
7、插入表格
8、插入圖片
9、視頻
以上截圖中的功能還不完整,如果想體驗以下完整的功能可以直接去DEMO頁面體驗,如果需要在HTML級別上更改元素的內容,那也是可以的。通過屬性對話框中的最后一個選項卡,可以查看所選元素的內部HTML代碼并直接對其進行更新。
下載倉庫并打開/ build文件夾,包括預構建的源文件。將文件夾的內容復制到項目的適當位置(例如,content-tools.min.js> /www/scripts/content-tools.min.js)。但是,/ images文件夾和icons.woff字體需要復制到與content-tools.min.css相同的文件夾中,文件結構應類似于:
<head> <title>My page</title> <link rel="stylesheet" type="text/css" href="assets/content-tools.min.css"> ... </head> <body> ... <script src="assets/content-tools.min.js"></script> <script src="assets/editor.js"></script> </body>
包括一個名為editor.js的附加JS文件。包含初始化我們的編輯器的代碼,繼續
<div data-editable data-name="main-content"> <blockquote> Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live. </blockquote> <p>John F. Woods</p> </div>
data-name屬性用于在保存時標識區域(默認情況下使用id屬性),標記可編輯HTML時,常見的誤解是將單個元素標記為可編輯,例如:
<h1 data-editable data-name="heading">Content</h1>
正確的使用方式如下,也就是說必須要在特定的容器元素內
<div data-editable data-name=heading> <h1>Content</h1> </div>
ContentTools使用CSS類來對齊文本,圖像,視頻和iframe,需要在自己的CSS中為這些對齊類定義樣式,例如:
[data-editable] iframe, [data-editable] image, [data-editable] [data-ce-tag=img], [data-editable] img, [data-editable] video { clear: both; display: block; margin-left: auto; margin-right: auto; max-width: 100%; } /* 左對齊 */ [data-editable] .align-left { clear: initial; float: left; margin-right: 0.5em; } /* 右對齊 */ [data-editable].align-right { clear: initial; float: right; margin-left: 0.5em; } /* 可編輯區域中文本的對齊樣式 */ [data-editable] .text-center { text-align: center; } [data-editable] .text-left { text-align: left; } [data-editable] .text-right { text-align: right; }
ContentTools提供了一個編輯器,但是在初始化它之前,我們需要配置一些東西,即:
將以下代碼添加到我們之前創建的editor.js文件中:
window.addEventListener('load', function() { var editor; });
就像文字處理程序一樣,可以為內容配置一系列預定義樣式。當用戶從視口底部的檢查器欄中選擇標簽時,這些標簽就會出現。盡管可以將樣式設置為適用于所有標簽,但是僅顯示適用于標簽類型的樣式。
我們將添加可應用于段落<p>標記的單一樣式.author。在var編輯器下方聲明添加:
ContentTools.StylePalette.add([ new ContentTools.Style('Author', 'author', ['p']) ]);
StylePalette.add方法使我們可以向編輯器添加樣式列表。每種樣式均聲明為一個Style實例,該實例使用顯示名稱,CSS類和可以應用該樣式的標簽列表初始化。我們需要添加相關的CSS來支持這種樣式,因此在HTML的開頭添加:
<head> ... <style> .author { font-style: italic; font-weight: bold; } </style> </head>
接下來,我們需要初始化編輯器,并讓它知道頁面上的哪些元素是可編輯的。為此,將以下代碼添加到editor.js中:
editor=ContentTools.EditorApp.get(); editor.init('*[data-editable]', 'data-name');
我們使用用于頁面可編輯區域的CSS選擇器和屬性名稱(“數據名稱”)來初始化編輯器,以告知編輯器元素的哪個屬性包含其區域名稱。區域名稱在同一頁面中必須唯一。
最后,我們希望在用戶保存頁面時得到通知,以便我們可以將每個區域的更新內容存儲在文件或數據庫中。為此,我們監聽由編輯器觸發的保存事件。在editor.init語句之后,將以下代碼添加到editor.js中:
editor.addEventListener('saved', function (ev) { var name, payload, regions, xhr; // 檢查是否已更改 regions=ev.detail().regions; if (Object.keys(regions).length==0) { return; } // 保存更改時將編輯器設置為忙 this.busy(true); // 將每個區域的內容收集到一個FormData實例中 payload=new FormData(); for (name in regions) { if (regions.hasOwnProperty(name)) { payload.append(name, regions[name]); } } // 將更新內容發送到要保存的服務器 function onStateChange(ev) { // 檢查請求是否完成 if (ev.target.readyState==4) { editor.busy(false); if (ev.target.status=='200') { // 保存成功,通知前臺 new ContentTools.FlashUI('保存成功'); } else { // 保存失敗,通知前臺 new ContentTools.FlashUI('保存失敗'); } } }; xhr=new XMLHttpRequest(); xhr.addEventListener('readystatechange', onStateChange); xhr.open('POST', '/save-my-page'); xhr.send(payload); });
當用戶保存頁面時,我們可以使用AJAX將每個區域的內容發送到服務器進行保存。在瀏覽器中打開頁面,尋找左上方的藍色編輯按鈕,然后單擊它以開始編輯。
這樣一個美觀且強大的即時編輯器可謂是非常的實用,特別是對于一些內容編輯網站,如CMS、靜態文檔網站、博客等內容型網站尤其有用,希望對你有所幫助,Enjoy it!
nyTXT Searcher是文件搜索工具,Everything作者推薦的免費文本內容搜索工具,各種Office文檔,文本文件,代碼,PDF等,它都可以輕而易舉的在1秒鐘之內搜出來,手到擒來!強大之處,讓你不可想象!
主界面
下載地址:https://anytxt.net/download/
AnyTXT Searcher 支持的文檔格式:
*請認真填寫需求信息,我們會在24小時內與您取得聯系。