整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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小時內與您取得聯系。
