更新时间:2021-06-01 来源:黑马程序员 浏览量:
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">
在学习媒体查询时,除了理解媒体查询的基本概念以及语法格式外,还需要通过案例来练习媒体查询的基本使用。
【AI设计】北京143期毕业仅36天,全员拿下高薪offer!黑马AI设计连续6期100%高薪就业
2025-09-19【跨境电商运营】深圳跨境电商运营毕业22个工作日,就业率91%+,最高薪资达13500元
2025-09-19【AI运维】郑州运维1期就业班,毕业14个工作日,班级93%同学已拿到Offer, 一线均薪资 1W+
2025-09-19【AI鸿蒙开发】上海校区AI鸿蒙开发4期5期,距离毕业21天,就业率91%,平均薪资14046元
2025-09-19【AI大模型开发-Python】毕业33个工作日,就业率已达到94.55%,班均薪资20763元
2025-09-19【AI智能应用开发-Java】毕业5个工作日就业率98.18%,最高薪资 17.5k*13薪,全班平均薪资9244元
2025-09-19