第二章 媒体查询 @media 于 meta 标签详解

本文介绍了CSS3中的媒体查询用法,包括在CSS和HTML中如何使用,以及不同媒体类型的解释。同时,详细阐述了媒体特性和连接符(and、not、only)的应用。还探讨了视口元标签的使用,如设置初始缩放比例和宽度,以及如何控制用户的页面缩放行为。这些技术对于实现响应式网页设计至关重要。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

媒体查询常用于自适应css布局,在这里不过多赘述。

2.2 媒体查询的语法

//css 中使用
@media mediatype and|not|only (media feature){
      css-code;
}

//link 中使用
<link rel="style sheet" type="text/css" media="screen" href="screenstyles.
css">
  • 用@media开通 注意@符号
  • mediatype 媒体类型
  • 关键字 and not only
  • media feature 媒体特性,必须有小括号包含

其中,媒体查询使用 and、or、not,only 连接,如果成立便执行花括号内 css。

mediatype 查询类型

解释说明
all用于所有设备
print用于打印机和打印预览

screen

用户电脑屏幕,平板电脑,智能手机等

3.css3媒体属性简介

其中上述属性都可以通过添加前缀 min- 或 max- 来添加限制。

应用案例

//当前窗口小于等于 960px 执行
@media screen and (max-width: 960px) {
    body {
        background-color: red;
    }
}
//屏幕小于等于 1920px 执行css
@media screen and (max-device-width: 1920px) {
    body {
        background-color: red;
    }
}

2.7 关于视口的 meta 标签

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

它可以在其中设置具体的宽度(比如使用像素单位),或者设置一个比例(比如2.0,即实际大小的两倍)。下面这行代码设置以内容实际大小的两倍(百分之二百)显示,并且把窗口宽度设置为设备宽度(width=device-width")用来适应移动设备。

//允许缩放3倍至0.5倍
<meta name="viewport" content="width=device-width, maximum-scale=3,
minimum-scale=0.5" />
//完全禁止缩放
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

通过这个<meta>标签还可以控制用户可以缩放页面的程度。下面的例子允许用户最大将页
面放大到设备宽度的三倍,最小可以将页面缩小至设备宽度的一半。

其中, user-scalable=no是禁止用户缩放的。

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

大多数情况下,都可以使用这个meta标签

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值