整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
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小时内与您取得联系。
