媒体查询的引入方式

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;

  }

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值