响应式页面

响应式：
Html:
meatv + enter键快速生产视口

含义为：宽为手机移动设备默认宽度，初始缩放比例为1.0，最大缩放比例为原始像素大小，不允许用户放大或者缩小;

在css底部写响应式样式或者用外部文件引入：
媒体类型引用方法：
1、link方式

2、media：引入条件 添加媒体查询的样式没有添加媒体查询的样式之间的优先级也是根据书写顺序规定的 页面样式用弹性盒和像素写

响应式条件：
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
@media mediatype and|not|only (media feature) {
    CSS-Code;
}
mediatype默认值是all(全部)；

and 操作符用来把多个 媒体属性 组合成一条媒体查询。只有当每个属性都为真时，结果才为真。
@media(min-width: 700px) and (orientation: landscape) { … }
在可视区域宽度不小于700像素并在在横屏时有效
@media tv and (min-width: 700px) and (orientation: landscape) { … }
在电视媒体上，可视区域不小于700像素宽度并且是横屏时有效。

not 操作符用来对一条媒体查询的结果进行取反。
only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用。
若使用了 not 或 only 操作符，必须明确指定一个媒体类型。

媒体查询中可以使用逗号分隔，效果等同于 or 逻辑操作符。
在最小宽度为700像素或是横屏的手持设备上应用一组样式：
@media (min-width: 700px), handheld and (orientation: landscape) { … }
如果是一个800像素宽的屏幕设备，媒体语句将会返回真，因为第一部分相当于 @media all and (min-width: 700px) 将会应用于该设备并且返回真，尽管我的屏幕媒体类型并不与第二部分的手持媒体类型相符。同样，如果我是一个500像素宽的横屏手持设备，尽管第一部分因为宽度问题而不匹配，第二部分仍会成功，因此整个媒体查询返回真

not 关键字应用于整个媒体查询，在媒体查询为假时返回真，在逗号媒体查询列表中 not 仅会否定它应用到的媒体查询上而不影响其它的媒体查询。not 关键字仅能应用于整个查询，而不能单独应用于一个独立的查询。
例如，not 在下面的查询中最后被计算：
@media not all and (monochrome) { … }
等价于：
@media not (all and (monochrome)) { … }
例如：看下面的媒体查询：
@media not screen and (color), print and (color)
等价于：
@media (not (screen and (color))), print and (color)

only(限定某种设备):only使用跟not相同，指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。
@media only screen and (color){…}
/* 平板之类的宽度 1024 以下设备 /
@media only screen and (min-width: 321px) and (max-width: 1024px) {}
/ PC客户端或大屏幕设备: 1028px 至更大*/
@media only screen and (min-width: 1029px) {}

/输入@media可自动生成样式/
@media only screen and (max-width:952px){
.wrapper{width: 720px;}
.content section{flex-direction: column;}
.content section article div{width: 720px;}
.content section article div img{width: 650px;height: 333px;}
.content section article div:nth-last-of-type(1){margin-bottom: 0;}
.content section aside div{width: 720px;}
.content section aside div.d2 .a2{width: 499px;text-align: center;background: #303030;color: #f2f2cb;}
.content section aside div:nth-last-of-type(1){margin-bottom: 35px;}
footer #footer{flex-direction: row;}
footer #footer div{width: 160px;}
footer #footer div.d2 ul{width: 160px;}
}

@media only screen and (max-width:737px){
.wrapper{width: 707px;}
nav ul li a{display: none;}
nav .a{display: flex;}
.content section{flex-direction: column;}
.content section article div{width:707px;}
.content section article div img{width: 637px;height: 404px;}
.content section article div:nth-last-of-type(1){margin-bottom: 0;}
.content section aside div{width: 707px;}
.content section aside div.d2 .a2{width:647px;text-align: center;background: #e67e22;color: #f2f2cb;}
.content section aside div:nth-last-of-type(1){margin-bottom: 35px;}
footer #footer{flex-direction: column;}
footer #footer div{width: 647px;}
footer #footer div.d2 ul{width: 647px;}
}