1.media query响应式布局——媒体查询html
使网页可以兼容多种终端显示，而不是为每一个终端作特定的版本，提供更加温馨的界面和更好的用户体验缓存
响应式布局设计比专门设计的手机版网站功能少，如获取用户GPS定位响应式设计很难实现，若是只是根据窗口大小为用户提供匹配的视觉效果仍是优先选择响应式设计服务器
优势：app
① 面对不一样分辨率设备灵活性强编辑器
② 可以快捷解决多设备显示适应问题ide
缺点：布局
① 兼容各类设备的工做量大，效率略慢测试
② （多终端兼容）代码累赘，会出现隐藏无用的元素，加载时间加长优化
③ 属于折中性质的设计解决方案，受多方面因素影响而达不到最佳效果网站
④ 必定程度上改变了网站原有的布局结构，会出现用户混淆的状况
2.@media语法格式
@media mediatype and|not|only (media feature) { CSS-Code; }
mediatype属性值：all（应用于全部设备）、print（用于打印机和打印预览）、screen（用于电脑屏幕、平板电脑、智能手机等）、speech（用于屏幕阅读器等发生设备）、tv（电视机类型的设备）
media feature经常使用属性值：
width，输出设备中的页面可见区域宽度
height，输出设备中的页面可见区域高度
aspect-ratio，输出设备中的页面可见区域宽度与高度的比率
max-width，输出设备中的页面最大可见区域的宽度
max-height，输出设备中的页面最大可见区域的高度
max-aspect-ratio，输出设备中的页面可见宽度与高度的最大比率
min-width，输出设备中的页面最小可见区域的宽度
min-height，输出设备中的页面最小可见区域的高度
min-aspect-ratio，输出设备中的页面可见区域宽度与高度的最小比率
device-width，输出设备的屏幕可见宽度
device-height，输出设备的屏幕可见高度
device-aspect-ratio，输出设备的屏幕可见宽度与高度的比率
max-device-width，输出设备的屏幕最大可见宽度
max-device-height，输出设备的屏幕最大可见高度
max-device-aspect-ratio，输出设备的屏幕可见宽度与高度的最大比率
min-device-width，输出设备的屏幕最小可见宽度
min-device-height，输出设备的屏幕的最小可见高度
min-device-aspect-ratio，输出设备的屏幕可见宽度与高度的最小比率
3.@media测试代码
<html>
<head>
<meta charset="utf-8">
<title>CSS_transform</title>
<meta name="viewport" content="initial-scale=1.0,width=device-width"/>
<style>
.box{
margin: 0px auto;
}
@media screen and (min-width: 968px){
.box{
width: 946px;
}
.box>div{
width: 229px;
height: 275px;
background-color: #e5e5e5;
margin: 10px 10px 0 0;
float: left;
}
.box>div:last-child{
margin-right: 0px;
}
}
@media screen and (min-width: 632px) and (max-width: 968px){
.box{
width: 468px;
}
.box>div{
width: 229px;
height: 275px;
background-color: aqua;
margin: 10px 10px 0 0;
float: left;
}
.box>div:last-child,.box>div:nth-child(2){
margin-right: 0px;
}
}
@media screen and (max-width: 632px){
.box{
width: 250px;
}
.box>div{
width: 250px;
height: 300px;
background-color: greenyellow;
margin: 10px 0px 0 0;
float: left;
}
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
4.viewport 用户网页可视区域
针对移动网页优化的viewport meta标签：
width，控制viewport的大小，能够定义具体数值（如900px），也能够是特殊的值（如 device-width）
height，指定viewport高度，同理width
initial-scale，初始缩放比例，即第一次加载页面时的缩放比例
maximum-scale，容许用户缩放到的最大值
minimum-scale，容许用户缩放到的最小值
user-scalable，规定用户是否能够手动缩放
5.meta元素，定义文档元数据（data about other data），主要用于描述信息资源和数据，便于计算机理解、检索和管理等
元数据的用途：
① 经过 name（须要定义的元数据名称）和 content（定义的内容或规则）属性定义名称/值对中的元数据，书写格式<meta name="参数名" content="参数值"/>
预约义元数据类型：
application name（当前网页所属Web应用程序的名称）、author（当前网页做者）、description（当前网页的描述）、generator（生成HTML的编辑器软件名称）、keywords（当前网页的搜索关键字）
其余经常使用元数据类型：
robots，定义网页索引范围，content参数包括：
none，文件和页面连接不容许查询，与“noindex, nofollow”做用相同
index，文件容许被检索（容许robot或spider登陆）
follow，页面上的连接容许查询
noindex，文件不容许检索，但页面上的连接能够查询（禁止robot或spider登陆）
nofollow，文件容许检索，但页面上的连接不能够查询（禁止robot或spider抓取网页连接往下追踪）
noarchive，禁止建立此页面的存档或缓存版本
copyright，描述当前网页的版权全部
revisit-after，声明当前网页容许多长时间访问一次
更多元数据扩展：http://wiki.whatwg.org/wiki/MetaExtensions
② meta第二个用途是声明字符集编码
ASCII，第一个字符编码标准，定义了127个字母数字字符
ANSI，原始的Windows字符集，支持256种不一样的字符代码
ISO-8859-1，HTML4的默认字符集，支持256种不一样的字符代码
UTF-8（Unicode），HTML5默认字符集，涵盖了世界上几乎全部的字符和符号
③ meta另外一个用途，经过http-equiv覆盖HTTP头之一的值，模拟来自服务器的HTTP标头
语法格式：<meta http-equiv="refresh" content="3; http://www.www.baidu.com"/>
经常使用属性值：refresh（设置页面从新加载的时间周期）、default-style（应用于此页面的首选样式表）、content-type（规定网页字符编码方式，②的替代方法）、……
6..multi-column 列布局，用于建立多个列对文本进行布局，属性：
column-count，定义元素分为多少列数，属性值为number
column-gap，定义列之间的间隔距离，单位px
column-rule，定义列之间分隔样式，如分割线、颜色等
能够分别设置，column-rule-width（分隔线宽度）、column-rule-style（分割线样式）、column-rule-color（分割线颜色）
column-width，定义每一列的宽度
<html>
<head>
<meta charset="utf-8">
<title>CSS_column</title>
<style>
.text{
width: 360px;
height: 500px;
background-color: #d5d5d5;
border: 1px solid red;
margin: 20px auto;
/*text-wrap: normal;*/
column-count: 3;
column-gap: 30px;
column-rule: 1px dashed #fe6a00;
}
</style>
</head>
<body>
<div class="text">
bai那样匆忙，看似那样繁华，却那样的沉重。不一样的人却一样为各类生活各类理想打拼，但愿在这个依然金钱化的社会拥有属于本身的一席之地，
这应该是全部的人包括那些还未出生的孩子之后对生活的想法。把每一个人由童心未泯机械化的改造为圆滑世故的俗人，这些并非咱们愿意的却必须面对的，
让我意识到其实人才是最悲哀，最可怜的，被社会这个大圈子牵引着，改变着，一点点迷失自我，磨消了思想。被庸俗套上铐链，却一脸幸福的笑
</div>
</body>
</html>