CSS3 Media Queries详解

最新推荐文章于 2024-04-01 11:58:19 发布

努力学习的小蜗牛

最新推荐文章于 2024-04-01 11:58:19 发布

阅读量241

点赞数

本文链接：https://blog.csdn.net/weixin_45806273/article/details/105940680

版权

在CSS中，有一个极其实用的功能：@media 响应式布局。具体来说，就是可以根据客户端的介质和屏幕大小，提供不同的样式表或者只展示样式表中的一部分。通过响应式布局，可以达到只使用单一文件提供多平台的兼容性，省去了诸如浏览器判断之类的代码。

Media Queries也就是“媒体查询”，在我们平时的Web页面中head部分常看到这样的一段代码：

<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
//或者
<style type="text/css" media="screen">
	@import url("css/style.css");
</style>

这两种方式引入CSS样式都有一个共同的属性“media”，而这个“media”就是用来指定特定的媒体类型，在HTML4和CSS2中充许你使用“media”来指定特定的媒体类型，比如屏幕（screen）和打印（print）的样式表

在用head链接CSS文件时提供判断语句，选择性加载不同的CSS文件

<link rel="stylesheet" href="middle.css" media="screen and (min-width: 400px)">

这表示在满足 media 的判断语句 screen and (min-width: 400px) 即屏幕并且最小宽度不小于400px 的介质上面使用 middle.css

解析
1、screen：这个不用说大家都知道，指的是一种媒体类型；
2、and：被称为关键词，与其相似的还有not,only；
3、（max-width:600px）：这个就是媒体特性，说得通俗一点就是媒体条件。

媒体介质类型

注意媒体类型名称区分大小写，并且尽管有些介质类型有重合，但是一个平台只会有一种介质类型

all – 全部媒体类型
braille – 盲文触摸装置
embossed – 分页盲文打印机
handheld – 小屏幕和流量有限的手持设备（注意！安装标准来说移动设备都应该使用这个介质类型，但是实际上安卓根本不理会这个介质，请使用 screen 结合媒体查询语句使用）
print – 提供给打印机的样式，最常用的介质类型，打印页面时获得适合阅读的效果
projection – 投影，给投影机使用
screen – 彩色屏幕，最常用的介质类型，一般和屏幕大小表达式联合使用
speech – 语音朗诵，用于屏幕阅读软件
tty – 固定间距字符网格，例如功能机那样的
tv – 智能电视设备

页面中引入媒体类型方法
1、link方法引入

<link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />

2、xml方式引入

1 <?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？>

3、@import方式引入

在样式文件中通过@import调用别一个样式文件：
@import url("css/reset.css") screen;
@import url("css/print.css") print;

在<head></head>中的<style>...</style>中引入:
<head>
     <style type="text/css">
     @import url("css/style.css") all;
     </style>
   </head>

4、@media引入

样式文件中使用：

 @media screen{
      选择器{
     属性：属性值；
     }
    }


在<head></head>中的<style>...</style>中调用：
   <head>
     <style type="text/css">
     @media screen{
            选择器{
          属性：属性值；
        }
     }
     </style>
   </head>

努力学习的小蜗牛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 Media Queries详解

在CSS中，有一个极其实用的功能：@media 响应式布局。具体来说，就是可以根据客户端的介质和屏幕大小，提供不同的样式表或者只展示样式表中的一部分。通过响应式布局，可以达到只使用单一文件提供多平台的兼容性，省去了诸如浏览器判断之类的代码。...
复制链接

扫一扫