整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
、定义
<meta> 标签提供关于 HTML 文档的元数据。它不会显示在页面上，但是对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
2、作用
meta里的数据是供机器解读的，告诉机器该如何解析这个页面，还有一个用途是可以添加服务器发送到浏览器的http头部内容，例如我们为页面中添加如下meta标签：
浏览器的头部就会包括这些:
只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。
3、meta的必需属性和可选属性
meta的必需属性是content，当然并不是说meta标签里一定要有content，而是当有http-equiv或name属性的时候，一定要有content属性对其进行说明。例如：
必需属性
<meta name="keywords" content="HTML,ASP,PHP,SQL">
这里面content里的属性就是对keywords进行的说明，所以呢也可以理解成一个键值对吧，就是{keywords:"HTML,ASP,PHP,SQL"}。
可选属性
在W3school中，对于meta的可选属性说到了三个，分别是http-equiv、name和scheme。考虑到scheme不是很常用，所以就只说下前两个属性吧。
http-equiv
http-equiv属性是添加http头部内容，对一些自定义的，或者需要额外添加的http头部内容，需要发送到浏览器中，我们就可以是使用这个属性。在上面的meta作用中也有简单的说明，那么现在再举个例子。例如我们不想使用js来重定向，用http头部内容控制，那么就可以这样控制：
<meta http-equiv="Refresh" content="5;url=http://blog.yangchen123h.cn" />
在页面中加入这个后，5秒钟后就会跳转到指定页面啦，效果可看W3school的例子
name
第二个可选属性是name，这个属性是供浏览器进行解析，对于一些浏览器兼容性问题，name属性是最常用的，当然有个前提就是浏览器能够解析你写进去的name属性才可以，不然就是没有意义的。还是举个例子吧:
<meta name="renderer" content="webkit">
这个meta标签的意思就是告诉浏览器，用webkit内核进行解析，当然前提是浏览器有webkit内核才可以，不然就是没有意义的啦。当然看到这个你可能会有疑问，这个renderer是从哪里冒出来的，我要怎么知道呢？这个就是在对应的浏览器的开发文档里就会有表明的，例如这个renderer是在360浏览器里说明的。360浏览器内核控制Meta标签说明文档
常用meta标签大总结
接下来就是常用的meta标签大总结啦，我会尽可能的做到全
charset
charset是声明文档使用的字符编码，解决乱码问题主要用的就是它，值得一提的是，这个charset一定要写第一行，不然就可能会产生乱码了。
charset有两种写法
两个都是等效的。
百度禁止转码
百度会自动对网页进行转码，这个标签是禁止百度的自动转码
<meta http-equiv="Cache-Control" content="no-siteapp" />
SEO 优化部分
viewport
viewport主要是影响移动端页面布局的，例如：
content 参数：
各浏览器平台
Microsoft Internet Explorer
Google Chrome
360浏览器
UC手机浏览器
UCBrowser_U3_API
QQ手机浏览器
Apple iOS
Google Android
App Links
最后——移动端常用的meta
在响应式布局逐渐成为主流的今天，网页或者app的流式布局已经不算是一个新鲜的词汇了。今天我要讲的一个内容也是跟页面流式布局有关，如何让你的网页实现完美的缩放？
我们可以很快速的写出一个响应式布局的页面，首先看一下效果图。
网页布局
其中html部分的代码如下：
html部分代码
css中的item代码为：
css代码
通过以上代码，完成上述的流式布局后，在我们改变浏览器窗口大小时，div也会随之进行缩放。
But，你以为这就是我们想要的结果吗？
当然不是！在改变浏览器窗口大小时，我们发现虽然div的宽度是进行了缩放，但是高度却没变，因此div的宽高比并未保持原始比例，我们可以看下以下的效果。
缩放后宽高比
从上图中可以很容易看出，缩放后的div宽高比比之前小很多，这并不是我们想要的结果。
我们需要达到的效果是在改变浏览器窗口大小时，div也会随之进行等比例的缩放。
首先，可以使用Javascript代码去实现，这是没有问题的。但是绑定Javascript的onresize事件，在拖拽时可能会出卡顿现象，体验不是很好。
接下来我们通过CSS来实现以上的效果。
使用的核心属性是我们平时并不太注意的padding-bottom。
padding-bottom有一个很容易让人忽略的特性是，当取值为百分比形式时，其百分比的基数是父元素的宽度，而不是高度。
因此我们可以在不用给父元素设置高度的时候，就可以通过padding-bottom属性确定当前元素的高度。我们的做法如下。
将元素的height属性设为0，通过padding-bottom属性确定元素高度。
设置合理的padding-bottom值，例如上述的例子中，在宽度为21%时，如果需要高度是宽度的1.62倍，我们可以将padding-bottom取值为34%
修改后的CSS代码如下。
修改后的CSS
修改后，我们再次调整浏览器窗口的大小，就会发现div是等比例的进行缩放，完美达到了我们的要求。
修改后等比例缩放
在这里，可能会有人有疑问如果设置overflow:hidden;那么里面的文字会不会因为超过height，就会被隐藏了？
答案是不会的，根据CSS2.1的规范，overflow只会对处于padding外面的内容生效，即只有超出了 padding区域的内容才会被overflow属性隐藏掉。而在设置padding-bottom后，实际已经决定了元素的height属性，因此overflow:hidden;不会生效。
今天这篇文章主要讲解了利用CSS完成页面等比例缩放的最简单方式，你学会了吗？
用鼠标改变元素的尺寸。
如需了解更多有关 resizable 交互的细节，请查看 API 文档 可调整尺寸小部件（Resizable Widget）。
默认功能
在任意的 DOM 元素上启用 resizable 功能。通过鼠标拖拽右边或底边的边框到所需的宽度或高度。
<!doctype html><html lang="en"><head>
<meta charset="utf-8">
<title>jQuery UI 缩放（Resizable） - 默认功能</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable();
});
</script></head><body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">缩放（Resizable）</h3></div>
</body></html>查看演示
动画
使用 animate 选项（布尔值）使缩放行为动画化。当该选项设置为 true 时，拖拽轮廓到所需的位置，元素会在拖拽停止时以动画形式调整到该尺寸。
<!doctype html><html lang="en"><head>
<meta charset="utf-8">
<title>jQuery UI 缩放（Resizable） - 动画</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
.ui-resizable-helper { border: 1px dotted gray; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
animate: true
});
});
</script></head><body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">动画</h3></div>
</body></html>查看演示
限制缩放区域
定义缩放区域的边界。使用 containment 选项来指定一个父级的 DOM 元素或一个 jQuery 选择器，比如 'document.'。
<!doctype html><html lang="en"><head>
<meta charset="utf-8">
<title>jQuery UI 缩放（Resizable） - 限制缩放区域</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
#container { width: 300px; height: 300px; }
#container h3 { text-align: center; margin: 0; margin-bottom: 10px; }
#resizable { background-position: top left; width: 150px; height: 150px; }
#resizable, #container { padding: 0.5em; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
containment: "#container"
});
});
</script></head><body>
<div id="container" class="ui-widget-content">
<h3 class="ui-widget-header">限制</h3>
<div id="resizable" class="ui-state-active">
<h3 class="ui-widget-header">缩放（Resizable）</h3>
</div></div>
</body></html>查看演示
延迟开始
通过 delay 选项设置延迟开始缩放的毫秒数。通过 distance 选项设置光标被按下且拖拽指定像素后才允许缩放。
<!doctype html><html lang="en"><head>
<meta charset="utf-8">
<title>jQuery UI 缩放（Resizable） - 延迟开始</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
#resizable, #resizable2 { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3, #resizable2 h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
delay: 1000
});
$( "#resizable2" ).resizable({
distance: 40
});
});
</script></head><body>
<h3 class="docs">时间延迟 (ms):</h3><div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">时间</h3></div>
<h3 class="docs">距离延迟 (px):</h3><div id="resizable2" class="ui-widget-content">
<h3 class="ui-widget-header">距离</h3></div>
</body></html>查看演示
助手
通过设置 helper 选项为一个 CSS class，当缩放时只显示元素的轮廓。
<!doctype html><html lang="en"><head>
<meta charset="utf-8">
<title>jQuery UI 缩放（Resizable） - 助手</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
.ui-resizable-helper { border: 2px dotted #00F; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
helper: "ui-resizable-helper"
});
});
</script></head><body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">助手</h3></div>
</body></html>查看演示
最大/最小尺寸
使用 maxHeight、maxWidth、minHeight 和 minWidth 选项限制 resizable 元素的最大或最小高度或宽度。
<!doctype html><html lang="en"><head>
<meta charset="utf-8">
<title>jQuery UI 缩放（Resizable） - 最大/最小尺寸</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
#resizable { width: 200px; height: 150px; padding: 5px; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
maxHeight: 250,
maxWidth: 350,
minHeight: 150,
minWidth: 200
});
});
</script></head><body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">放大/缩小</h3></div>
</body></html>查看演示
保持纵横比
保持现有的纵横比或设置一个新的纵横比来限制缩放比例。设置 aspectRatio 选项为 true，且可选地传递一个新的比率（比如，4/3）。
<!doctype html><html lang="en"><head>
<meta charset="utf-8">
<title>jQuery UI 缩放（Resizable） - 保持纵横比</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
#resizable { width: 160px; height: 90px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
aspectRatio: 16 / 9
});
});
</script></head><body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">保持纵横比</h3></div>
</body></html>查看演示
对齐到网格
对齐 resizable 元素到网格。通过 grid 选项设置网格单元的尺寸（以像素为单位的高度和宽度）。
<!doctype html><html lang="en"><head>
<meta charset="utf-8">
<title>jQuery UI 缩放（Resizable） - 对齐到网格</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
grid: 50
});
});
</script></head><body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">网格</h3></div>
</body></html>同步缩放
通过点击并拖拽一个元素的边来同时调整多个元素的尺寸。给 alsoResize 选项传递一个共享的选择器。
<!doctype html><html lang="en"><head>
<meta charset="utf-8">
<title>jQuery UI 缩放（Resizable） - 同步缩放</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
#resizable { background-position: top left; }
#resizable, #also { width: 150px; height: 120px; padding: 0.5em; }
#resizable h3, #also h3 { text-align: center; margin: 0; }
#also { margin-top: 1em; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
alsoResize: "#also"
});
$( "#also" ).resizable();
});
</script></head><body>
<div id="resizable" class="ui-widget-header">
<h3 class="ui-state-active">缩放</h3></div>
<div id="also" class="ui-widget-content">
<h3 class="ui-widget-header">同步缩放</h3></div>
</body></html>查看演示
文本框
可缩放的文本框。
<!doctype html><html lang="en"><head>
<meta charset="utf-8">
<title>jQuery UI 缩放（Resizable） - 文本框</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
.ui-resizable-se {
bottom: 17px;
}
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
handles: "se"
});
});
</script></head><body>
<textarea id="resizable" rows="5" cols="20"></textarea>
</body></html>视觉反馈
通过设置 ghost 选项为 true，可在缩放期间显示一个半透明的元素，而不是显示一个实际的元素。
*请认真填写需求信息，我们会在24小时内与您取得联系。
