css媒体查询解析

最新推荐文章于 2024-05-22 12:05:09 发布

~Butterfly~

最新推荐文章于 2024-05-22 12:05:09 发布

阅读量993

点赞数 4

文章标签： css 媒体前端

本文链接：https://blog.csdn.net/tjsnbb/article/details/132415588

版权

媒体查询

1、媒体查询介绍:

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

媒体查询，传播信息的一种载体（报纸、投影、平板、电脑等等）

2、媒体查询操作方式：

实际操作为：对设备提出询问（称作表达式）开始，如果表达式结果为真(符合当前条件)，媒体查询中的CSS被应用，如果表达式结果为假(不符合)，媒体查询内的CSS将被忽略。

一、媒体查询示例

1、语法：

/*表示设备宽度小于320px时就不执行蓝色背景了。*/
@media all and (min-width:320px) { 
	div{ background-color:blue;}
}  

/*表示设宽度到640px------300px之间显示桔色背景。*/
@media only screen and (min-width: 300px) and (max-width: 640px) {
    div{
    	background-color: orange;
    }
}      

/* 竖屏 */
@media screen and (orientation:portrait) {对应样式}

/* 横屏 */
@media screen and (orientation:landscape){对应样式}

/* 表示排除某种设备 */
@media not screen and (min-width:800px){
            div{
                height: 100px;
                background-color: greenyellow;
                font-size: 30px;
                text-align: left;
            }
        } 

/* 详细解析一下下面代码 */
@media only screen and (min-width:800px){
            div{
                height: 100px;
                background-color: greenyellow;
                font-size: 30px;
                text-align: left;
    }
}
/*
media 表示媒体
only 表示限定为某种设备
screen 表示的手机、电脑、平板等等设备
and 表示和、并且。后面可以写限定的条件了
all 表示所有设备
not 表示排除某种设备
min-width:800px 表示当宽度小于800px的时候就不成立了，大于800px的时候才满足条件
注意点：
     and后面需要一个空格
     条件后面不能加分号
*/

2、媒体类型:

在这里插入图片描述

3、名词解释：

screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型
and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)
(min-width: 400px) 就是媒体特性，其被放置在一对圆括号中

4、断点介绍：

无论基于那种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化（发生布局改变的临界点称之为断点）

在这里插入图片描述

5、css2媒体查询语法:

其实并不是只有CSS3才支持Media的用法，早在CSS2开始就已经支持Media，具体用法，就是在HTML页面的head标签中插入如下的一段代码

<link rel="stylesheet" type="text/css" media="screen" href="style.css">;

想知道现在的移动设备是不是纵向放置的显示屏，可以这样写：

<link rel=“stylesheet” type=“text/css” media=“screen and  (orientation:portrait)”  	href="style.css">

第一段的代码也用CSS2来实现，让它一样可以在页面宽度小于960的执行指定的样式文件：

<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">

二、常见的布局方案

固定布局：以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸；
可切换的固定布局：同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过识别的屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局；
弹性布局（流式布局）：以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；
混合布局：同弹性布局类似，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；只是混合像素、和百分比两种单位作为页面单位。
布局响应：对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：pc优先（从pc端开始向下设计）；移动优先（从移动端向上设计）；
移动端布局：利于flexbox（弹性盒、伸缩布局） + rem布局、vw、vh布局

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

三、响应式布局方案

1、基于媒体查询实现

在这里插入图片描述

2、响应式布局特点

设计特点：

a、面对不同分辨率设备灵活性强

b、能够快捷解决多设备显示适应问题

缺点：

a、兼容各种设备工作量大，效率低下

b、代码累赘，会出现隐藏无用的元素，加载时间加长

c、其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

四、Meta标签的设置

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

这段代码的几个参数解释：

width = device-width：宽度等于当前设备的宽度  

initial-scale： 初始的缩放比例（默认设置为1.0）

minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）

maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）

user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

五、媒体查询的具体使用

5.1媒体查询适配rem

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html{
            font-size: 100px;
        }
        @media all and (max-width:1000px){
            html{
                font-size: 75px;
            }
        }
        @media all and (max-width:750px){
            html{
                font-size: 50px;
            }
        }
        @media all and (max-width:500px){
            html{
                font-size: 30px;
            }
        }
        div{
            width: 1rem;
            height: 1rem;
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

5.2 使用媒体查询限定rem范围

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/flexbox.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* 表示如果屏幕的宽度大于750px的时候，那么以75px作为页面的基准值，可以限定网页的样式的比例，防止页面被过度缩放 */
        @media all and (min-width:750px){
            html{
                font-size: 75px !important;
            }
        }
        header{
            width: 10rem;
            height: 2.67rem;
            background-color: hotpink;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <header>网页头部区域</header>
</body>
</html>

~Butterfly~

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
css媒体查询解析

1、媒体查询介绍:媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
复制链接

扫一扫