响应式布局

响应式布局的解释就是用一套代码，去适配不同的设备，既可以运行在PC端，又可以运行在移动端。响应式布局适合用在小网站、个人博客、产品介绍页中等等，对于移动端和网页端差距比较大网站就不建议用响应式布局了。
响应式布局的实现：采用CSS3媒体查询，即media queries。可以针对不同的媒体类型设置不同的样式，从而实现响应式布局。同时也可以针对不同的分辨率设置不同的样式。
不同设备的分辨率：
1024px以上：PC端；
1024-768px：pad pro；
768-450px:pad mini和手机横屏；
450px以下：手机竖屏。
还有移动端横竖屏的区别：
orientation:portrait : 竖屏；orientation:landscape : 横屏，这个只针对移动端，在PC端屏幕一直都是竖屏的。
媒体查询的取值：
all：用于所有设备
print：用于打印机和打印预览
screen：用于电脑屏幕，平板电脑，智能手机等
speech：应用于屏幕阅读器等发声设备

		@media all and (max-width:1199px){
            #content{width: 939px;}
        }
        @media all and (max-width: 991px){
            #content{width: 740px;flex-wrap: wrap;}
            #content .left{width: 100%;}
            #content .right{width: 100%;}
        }

以上代码就是媒体查询在css中的使用，注意这个and是用来指定多个条件的，两边的空格是必须要添加的。第一个media的作用是，当网页最大宽度是1199px的时候执行花括号里的代码，同理第二个media的作用就是，当网页最大宽度是991px的时候执行花括号里的代码。还可以使用多个and来添加更多的条件，使用的时候要注意使用规范。这里还可以使用not来对条件去反值，语法为@media not all and (min-width:500px){#box{background:blue}}
表示的就是分辨率大于500px是花括号里的代码生效，这里not针对的是分辨率而不是设备。media优先级规定，如果对两个media的条件都满足，那么谁写在后面谁优先级高。
响应式布局的具体实现：
先去适配手机端 -> 过渡到pad -> 过渡到pc (不是很推荐)
先去适配PC端 -> 过渡到pad -> 过渡到手机端 (推荐的)
外联link的使用

	<link rel="stylesheet" href="./css/menu-small.css" media="all and (max-width:1450px)">
    <link rel="stylesheet" href="./css/menu-large.css" media="all and (min-width:1450px)">

以上就是对响应式布局的学习与了解，逆战，加油！