CSS--媒体查询

媒体查询：根基浏览器窗口的不同大小，设置元素的不同显示状态。

    <!--
    1.在企业开发中, 如果需要分别给电脑/平板/手机分别设置样式, 那么我们会将电脑的样式写在前面, 平板的样式写在电脑的后面, 手机的样式写在平板的后面
    2.在企业开发中媒体查询中指定的宽度不是固定的, 指定的宽度是根据自己企业的需求来指定的, 并没有一个固定的值代表电脑的, 也没有一个固定的值代表平板的, 也没有一个固定的值代表手机的
    -->
    <link rel="stylesheet" href="媒体查询CSS/index-pc.css" media="screen and (min-width: 1200px)">
    <link rel="stylesheet" href="媒体查询CSS/index-pad.css" media="screen and (max-width: 1199px)">
    <link rel="stylesheet" href="媒体查询CSS/index-phone.css" media="screen and (max-width: 768px)">

    <!--
    1.如果给电脑的CSS添加条件， 那么在平板和手机上所有的样式都会消失， 那么如果平板和手机上有和电脑上相同的样式也不能复用
    2.所以不要给电脑的CSS添加条件， 这样无论浏览器的宽度是多少， 电脑的CSS文件都会被执行， 我们只需要在平板或者手机对应的CSS文件中通过相同的选择器覆盖掉不同的样式即可

    3.企业开发中编写响应式网站的步骤
    3.1编写电脑版本的网页
    3.2编写平板版本的网页， 通过相同的选择器覆盖掉不同的样式
    3.3编写手机版本的网页， 通过相同的选择器覆盖掉不同的样式
    -->
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/index-pad.css" media="screen and (max-width: 1199px)">
    <link rel="stylesheet" href="css/index-phone.css"  media="screen and (max-width: 768px)">