媒体查询的引入方式

1.2.2 媒体查询的引入方式

 1.内部方式引入

        body {

            background-color: red;

        }

        /* 横屏 宽大于高 */

        @media screen and (orientation: landscape) {

            body {

                background-color: yellow;

            }

        }

        /* 竖屏 高大于宽 */

        @media screen and (orientation: portrait) {

            body {

                background-color: pink;

            }

        }

 2.外链式

 在html的head标签的内部使用link标签引入外部的css文件（后缀名为.css的文件）

       body {

        background-color: pink;

    }

    /* 横屏 宽大于高 */

    @media screen and (orientation: landscape) {

        body {

            background-color: tomato;

        }

    }

    /* 竖屏 高大于宽 */

    @media screen and (orientation: portrait) {

        body {

            background-color: yellowgreen;

        }

    }

    <!-- 只有横屏时有样式 -->

    <link rel="stylesheet" href="./css/demo.css" media="screen and (orientation: landscape)">

    <!-- 只有竖屏时有样式 -->

    <link rel="stylesheet" href="./css/demo.css" media="screen and (orientation: portrait)">

 2、 响应式开发原理（实现步骤）

 2.1 设置 viewport

2 .2 创建流式布局

响应式在设计和布局初期就要考虑页面如何在多终端展示，因此需要根据页面效果分析创建方便后续处理版式变化的流式布局

2.2.1 模块布局响应

对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：桌面优先（从桌面端开始向下设计）；移动优先（从移动端向上设计）；

无论基于那种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化，主要的布局方式主要有以下几种

· 模块中内容：挤压－拉伸；

· 模块中内容：换行－平铺；

l 模块中内容：删减－增加；

n 模块位置的变化

其中涉及到的布局技巧的应用

如：尽量少使用绝对宽度、百分比布局、弹性盒、弹性网格\浮动技巧、定位技巧的应用、box-sizing,显示隐藏的应用

 2.2.2 响应式图片

1.内容图片响应

在html页面中的图片，比如文章里插入的图片我们都可以通过css样式使用百分比，来进行控制图片缩放：

#wrap  img{

  width:100%;

 }

以上代码将强制图像占据其父元素空间的100%，当父元素宽度改变时图像元素也会相应改变，而高度默认为auto,图像自身宽高比例不会发生变化

#wrap  img{

  max-width:100%;  

 }

以上代码将实现父元素宽度小于图像本身宽度时，图像跟随父元素改变，当父元素宽度大于图片时，图片宽度以自身本身宽度显示

 2.背景图片处理

除了img标签的图片外我们经常会遇到背景图片，比如logo为背景图片：

#logo a{

  display:block;

​    width:100%;

​    height:40px;

​    text-indent:55rem;

​    background-img:url(logo.png);

​    background-repeat:no-repeat;

​    background-size:100% 100%;

   }

background-siz属性值设置为百分比值或cover,contain等，将实现背景图片的大小跟随元素大小响应变化。

2.2.3 响应式文字

相对单位在字号、行高中的应用可以一定程度上提升效率精简代码

@media screen and (orientation:landscape){

     .box{

      font-size:20px;

      line-height:30px;

    }

    .box h2{

      font-size:40px;

      line-height:60px;

     }

}

@media screen and (orientation:portrait){

      .box{

    ​    font-size:12px;

    ​    line-height:24px;

      }

    .box h2{

    ​    font-size:24px;

    ​    line-height:36px;

    }

}

```

改写后

```

@media screen and (orientation:landscape){

     .box{

      font-size:20px;

      line-height:1.5;

    }

    .box h2{

      font-size:2em;

      }

}

@media screen and (orientation:portrait){

.box{

  font-size:12px;

  }

}