首页技术文章正文

什么是媒体查询?怎样使用媒体查询?

更新时间:2021-06-01 来源:黑马程序员 浏览量:

1577370495235_学IT就到黑马程序员.gif

CSS的Media Query媒体查询(也称为媒介查询)用来根据窗口宽度、屏幕比例和设备方向等差异来改变页面的显示方式。使用媒体查询能够在不改变页面内容的情况下,为特定的输出设备制定显示效果。

1)媒体查询由媒体类型和条件表达式组成。常用的媒体查询属性如下。
2)设备宽高: device-width、device-height。
3)渲染窗口的宽和高:width、height。
4)设备的手持方向:orientation。
5)设备的分辨率:resolution。


媒体查询的使用方法有两种,即内联式和外联式。下面通过代码来对这两种方式进行演示。利用媒体查询实现当文档宽度大于640px 时,则对CSS样式进行修改。

(1)内联式是直接在CSS中使用,示例代码如下。

<style>
 @media screen and (min-width:640px){
  css属性: css属性
 }
</style>


(2)外联式是作为单独的CSS文件从外部引入的,示例代码如下。

<link href="style.css" media="screen and (min-width:640px)" ref="stylesheet">


在学习媒体查询时,除了理解媒体查询的基本概念以及语法格式外,还需要通过案例来练习媒体查询的基本使用。





猜你喜欢:

如何下载和使用Normalize.css?【移动web页面开发】

书写CSS需要遵循哪些规则?它的结构有什么特点?a>

CSS3盒子模型边框怎样实现圆角效果

黑马程序员前端高级软件工程师培训

分享到:
在线咨询 我要报名
和我们在线交谈!