美文网首页
什么是媒体查询?

什么是媒体查询?

作者: Amuer蘃 | 来源:发表于2019-11-03 19:19 被阅读0次
1、什么是媒体查询?

媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询中可用于检测的媒体特性有 width 、 height 和 color (等)。使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。

2、媒体查询与弹性盒布局的适用情况

媒体查询:当页面的结构发生变化的话最好使用媒体查询。
弹性盒:如果只是宽高的变化,尽量使用弹性盒

3、三栏布局--》两栏布局--》一栏布局

<style>
        @media screen and (min-width:1100px){ /*三栏布局*/
            .box1{width: 100px;} /*没有写高度,由内容撑起来*/
            .box2{flex:1; }
            .box3{width: 100px;}
        }
        @media screen and (min-width:800px) and (max-width:1100px){ /*二栏布局*/
            .box1{width: 100px;}
            .box2{flex:1; }
            .box3{width: 100%;}
        }
        @media screen and (max-width:800px) { /*一栏布局*/
            .box1,.box2,.box3{width: 100%;}
        }
</style>

相关文章

  • 移动端布局-媒体查询 + rem单位布局

    媒体查询 + rem单位布局 说道这个布局,,那么我们首先得了解什么是媒体查询,rem是什么? 媒体查询:媒体查询...

  • rem布局&响应式布局

    rem布局 1.rem单位 2.媒体查询 2.1 什么是媒体查询 2.2 媒体查询语法规范 2.3 媒体查询+re...

  • 什么是媒体查询?

    1、什么是媒体查询? 媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定...

  • CSS3--媒体查询

    什么是媒体查询?媒体查询就是获取到当前浏览器的宽度之后, 根据不同的宽度设置元素不同的样式 媒体查询的注意点由于媒...

  • 好程序员web前端培训技术分享媒体查询

    好程序员web前端培训技术分享媒体查询 什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比...

  • 响应式网站的思考

    1.媒体查询的实际意义? 2.媒体查询的断点应该由什么来决定? 3.媒体查询应该注意什么? (1)尽量使用百分比长...

  • JavaScript---媒体查询(响应式)

    媒体查询 媒体查询是做响应式网站的必备 媒体查询的格式@media (min-width: 980px){}@me...

  • 媒体查询和动态REM

    媒体查询和的动态REM是响应式页面和移动端的常用技术。 媒体查询的主要方式有: link元素媒体查询 样式表中媒体...

  • 响应式布局之媒体查询(media-queries)

    建议学习时长: 30分钟学习方式:深入 学习目标 了解什么时候用媒体查询 知道媒体查询怎么写 详细介绍 CSS媒体...

  • css媒体查询

    什么是媒体查询 媒体查询可以根据不同的显示设备以及特性(如视口宽度、屏幕比例、设备方向:横向或纵向)来为页面设定特...

网友评论

      本文标题:什么是媒体查询?

      本文链接:https://www.haomeiwen.com/subject/abdlbctx.html