CSS3设备兼容布局多媒体查询

仙鹤__

于 2023-04-09 12:52:22 发布

阅读量229

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/weixin_52629158/article/details/130040692

版权

响应式-- 在指定的区间内，针对某个元素，使用的样式

1.1设备兼容

设备指的是终端，手机、平板、电脑。

兼容指的是在多个设备可以去正常访问。

1.2 多媒体查询布局是响应式的

响应式要求：

viewport视口

<meta name="viewport" content="width=device-width, initial-scale=1">

user-scalable=no 可以禁用其缩放（zooming）功能，这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">

1.3 媒体查询

在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

min-width最小宽度

max-width最大宽度

例如：

<style>
 @media screen and (max-width:767px){
        body{
           background-color: red;
        }
    }
    /* 平板 */
    @media screen  and (min-width:768px){
        body{
            background-color: blue;
        }
    }
    /* 桌面 最小宽度是992像素*/
    @media screen and (min-width:992px) {
        body{
            background-color: pink;
        }
       
    }
    /* 区间值设置 */
    @media screen and (min-width:993px) and (max-width:1199px){
    body{
        background-color: skyblue;
       
    }
    h1{
        color:orange;
        font-size:50px;
    }
}
    /* 大桌面 */
    @media screen and (min-width:1200px) {
    body{
        background-color: green;

    }
}  
       
   
    </style>

1.4 媒体查询区间值的设置

   <style> 
		/* 区间的设置 */
        @media screen and (min-width:993px) and (max-width:1119px) {
            body{
                background: pink;
            }
            h1{
                font-size: 50px;
                color: red;
            }
        }

    </style>
</head>
<body>
    <h1>你好H5</h1>
</body>

区间值是可以进行进一步细化的，可以根据ui设计稿，自己自由做区间值设置

 @media screen and (max-width:767px){        
 body{ 
 background-color: red;        
 }  
  }

@media only screen and (max-width: 340px) {        
    body{    background: #ff0;    } 
} 
 
@media only screen and (min-width: 341px) and (max-width: 640px) {         
    body{    background: #f00;    } 
} 
 
@media only screen and (min-width: 640px) and (max-width: 740px) {         
    body{    background: #0f0;    } 
}

仙鹤__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3设备兼容布局多媒体查询

可以禁用其缩放（zooming）功能，这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。区间值是可以进行进一步细化的，可以根据ui设计稿，自己自由做区间值设置。响应式-- 在指定的区间内，针对某个元素，使用的样式。兼容指的是在多个设备可以去正常访问。设备指的是终端，手机、平板、电脑。viewport视口。
复制链接

扫一扫