媒体查询与响应式
1：基本概念根据一个或多个基于设备类型、具体特点和环境的媒体查询来应用样式。简单来说就是针对不同的媒体类型（比如屏幕、打印机或者屏幕阅读器）定义不同的样式，可以针对不同的屏幕尺寸设置不同的样式（比如手机iphone6和iPhone6plus它们两尺寸是不一样的、笔记本电脑和电脑屏幕也是不一样的大小），应用的、了响应式布局我们就可以实现在小尺寸的屏幕上或者大尺寸的台式机的屏幕上显示的效果是接近的，或者说不至于出现样式的错乱。 2：浏览器兼容完全支持@media第一个浏览器版本（ie9以下是不支持的） 图片描述 3：语法在了解语法前，我们需要了解一下css，css叫做层叠样式规则，也就是后面的会把前面的覆盖掉，这里涉及到了优先级的问题。因此媒体查询@media一般放在css文件的最下面，因为读文件是从上到下依次进行，为了不被覆盖掉。 写法一： @media mediatype and | not | only (media feature) { CSS-Code;}写法二：在不同的屏幕尺寸下面引用不同的css文件 <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">那么media到底是怎么使用的呢？首先是它的媒体类型： 4：媒体类型（分为四种）all（所有设备） @media all and|not|only (media feature) { CSS-Code;}screen（电脑屏幕，平板电脑，智能手机） @media screen and|not|only (media feature) { CSS-Code;}print（打印机和打印预览） @media print and|not|only (media feature) { CSS-Code;}speech（屏幕阅读器等发声设备，一般是供盲人浏览网页使用） @media speech and|not|only (media feature) { CSS-Code;}5：运算符（是跟在mediatype后面的）运算符是跟在mediatype后面的，它的意思就是and连接、not不是、only，除此之外还有一个，逗号，逗号就是或的意思，两个逗号左侧或在右侧满足任何一个都会应用样式。 and @media screen and (max-width: 600px) { CSS-Code; }not @media not screen { CSS-Code;}only @media only screen { CSS-Code;}, 表示或的意思 ...