响应式媒体查询实现方法

最新推荐文章于 2024-06-21 12:00:00 发布

chenbixi

最新推荐文章于 2024-06-21 12:00:00 发布

阅读量1.1k

点赞数

分类专栏：响应式媒体查询文章标签：响应式媒体查询

本文链接：https://blog.csdn.net/chenbixi/article/details/100075057

版权

响应式媒体查询专栏收录该内容

1 篇文章 0 订阅

订阅专栏

响应式开发媒体查询实现方法

响应式开发屏幕大小：

超小屏幕	移动设备	w<768px
小屏幕	768px-992px	768px<=w<992px
中屏幕	992px-1200px	992px<=w<1200px
宽屏幕	1200px以上	w>=1200px

媒体查询基本实现方式常用属性设置

css基本语法

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

注意：not 指取反值 only指仅仅代表当前条件以下

你也可以针对不同的媒体使用不同 stylesheets :

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

媒体类型 mediatype：

all 用于所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕，平板电脑，智能手机等
speech 应用于屏幕阅读器等发声设备

媒体功能 feature

列举几个最常用的

device-width 定义输出设备的屏幕可见宽度
max-width 定义输出设备中的页面最大可见区域宽度
min-device-width 定义输出设备的屏幕最小可见宽度

还有很多就不一一例举了具体请参考菜鸟教程
需要注意的是
min-width:指的是当前可视区域的宽度，在pc端和移动端都能正常适配，效果一致。
min-device-width:指的是当前设备的宽度。在移动端下和期望值一样，在pc端改变浏览器大小时，无响应。因为改变浏览器大小时设备的宽度不会改变。

代码演示1

媒体查询设置不同屏幕宽度下的样式

需求

默认body为red
w小于768为green
w在768-992中间为blue
在992-1200 为pink
大于1200 为yellow

<style>
            body{
                background: red;

            }
            /* 添加媒体查询 and 前后加空格*/
            /* 书写建议：判断最小值要从小到大写
               判读最大值 从大到小写*/
            /* 条件判断的顺序： 当判断最小值 并且 从小到大进行判断（当满足条件的时候）
            1.向上兼容：如果设置了宽度更小时的样式 默认的这些样式也会传递到宽度更大的条件范围内
            2.向下覆盖：宽度更大的样式会将前面更小的样式覆盖掉*/
            /* 宽度小于768 不能超过768*/

            /* 当拖动浏览器大小时，device当前设备的屏幕（显示屏）不会改变 */
            @media screen and (max-width: 768px){
                body{
                    background: green;
                }
            }
            /* 768-992 */
            @media screen and (min-width: 768px) and (max-width: 992px){
                body{
                    background: blue;
                }
            }
            /* 992-1200 */
            @media screen and (min-width: 992px) and (max-width: 1200px){
                body{
                    background: pink;
                }
            }
            /* 1200以上 */
            @media screen and (min-width: 1200px){
                body{
                    background: yellow;
                }
            }
        </style>
    </head>
    <body>
        <!-- 需求
        默认body为red
        w小于768为green
        w在768-992中间 为blue
        在992-1200 为pink 
        大于1200 为yellow-->
        <!-- 媒体查询 设置不同屏幕宽度下的样式 -->
    </body>

代码演示2

通过媒体查询改变每一行子div的数量

需求

w在768以下子元素宽度是父元素的100%
768-992 每一行放两个子元素 50%
992-1200 每行三个子元素 33.33%
1200以上每行四个子元素 25%

<style>
            /* 需求
            768以下 子元素宽度是父元素的100%
            768-992 每一行放两个子元素  50%
            992-1200 每行三个子元素  33.33%
            1200以上 每行四个子元素  25%*/
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                width: 100%;
                height: 200px;
                background: #ccc;

            }
          
            .box>div{
                box-sizing: border-box;
                width: 100%;
                height: 100%;
                background: skyblue;
                border-right: 2px solid blue;
                border-bottom: 2px solid blue;
                float: left;   
            }
            /* 通过媒体查询 改变每一行子div的数量   从小到大写 */
            /* 768-992 每一行放两个子元素  50% */
            @media screen and (min-width: 768px){
                .box>div{
                    width: 50%;
                }
            }
            /* 992-1200 每一行放三个子元素  33.33% */
            @media screen and (min-width: 992px){
                .box>div{
                    width: 33.33%;
                }
            }
            /* 1200以上 每行四个子元素  25% */
            @media screen and (min-width: 1200px){
                .box>div{
                    width: 25%;
                }
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>            
        </div>
     </body>

代码演示三

通过媒体查询调用不同的css样式文件

<link rel="stylesheet" href="b.css">
<link rel="stylesheet" media="screen and (min-width:992px) and (max-width:1200px)" href="a.css">

chenbixi

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
响应式媒体查询实现方法

响应式开发媒体查询实现方法响应式开发屏幕大小：超小屏幕移动设备w<768px小屏幕768px-992px768px<=w<992px中屏幕992px-1200px992px<=w<1200px宽屏幕1200px以上w>=1200px媒体查询基本实现方式常用属性设置css基本语法@media media...
复制链接

扫一扫