1.响应式布局知识:(media query 媒体查询)
在不同宽度下显示不同样式，例如手机端和电脑端，我们可以写3个css，第一个是全部适应的，第二个是适应电脑端，第三个适应手机端。用代码表示【<link media="(min－width:500px)" rel="stylesheet" href="a.css">电脑适应宽度最小不能小于500px——电脑端。】【手机端代码如下 <link media="(max－width:500px)" rel="stylesheet" href="b.css">手机端最大宽度不能大于500px】【第一个全部适应的，正常写，和平常一样引入外联】
----------------------媒体查询：---------------------
小案例：
<style media="screen">//这个是屏幕设置 ----屏幕设备
<style media="print">//这个是打印设置------打印设备
默认是<style media="all"></style>//全部适用
在link可以这样写：
①<link rel="stylesheet" href="screen.css" media="all">//不填all也可以的。
②<link rel="stylesheet" href="screen.css" media="screen">
③<link rel="stylesheet" href="print.css" maedia="print.css">
在HTML里面感觉这样写太多乱，可以这样写：
<link rel="stylesheet" href="css/all.css">
在all.css引入多个css,例如：
@import url(screen.css) screen;等这些，然后最后的screen是适用什么设备的。
-------------小练习--------
设置导航栏的功效，其中首页文字在缩小屏幕宽度的时候不见。
