@media 媒体查询的使用

最新推荐文章于 2024-06-01 09:39:57 发布
最新推荐文章于 2024-06-01 09:39:57 发布
阅读量269 收藏
点赞数
分类专栏： 前端学习 HTML5 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41251187/article/details/103527318
版权

@media 媒体查询

@media-使用场景？

1.针对不同媒体类型定义不同的样式
2.针对不同屏幕尺寸设置不同的样式，在设置响应式页面时非常有用

使用方式

@media (max-width:600px){
  #video{
    width:80%;
  }

当屏幕宽度小于600px的时候，设置#video元素的width为屏幕宽度的80%

M-Didid
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端学习（258）:flex-wrap
歌谣的博客
12-30 322
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
@media媒体查询实现简单响应式页面.rar
08-23
`@media`媒体查询是CSS3中的一个关键特性，它允许内容根据设备的特定条件（如视口宽度、设备像素比等）进行适配。这个压缩包文件提供了一个简单的示例，帮助我们回顾和理解如何使用`@media`来创建基本的响应式页面。...
媒体查询应用
qq_48235154的博客
12-19 118
媒体查询应用
@media使用方法
最新发布
qq505751223的博客
06-01 564
media是 CSS3 中的一个重要特性，它允许我们根据设备的特性（如设备的宽度、高度、方向、分辨率等）来应用不同的样式规则。下面是@media。
@media
fmyzc的博客
05-09 1026
开始编写响应式页面编写之前呢，有几个要准备的工作准备工作1：设置Meta标签首先我们在使用 @media 的时候需要先设置下面这段代码，来兼容移动设备的展示效果：&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"&gt;这段代码的几个参数解释：width = devic...
H5 media 媒体查询
一直专注于互联网
08-10 1886
&lt;!DOCTYPE html&gt; &lt;html lang="zh-cn"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;!-- content属性值 : width:可视区域的宽度，值可为数字或关键词device-width height:同width intial-scale:页
CSS的@media——媒体查询
qq_44849271的博客
02-26 357
CSS的@media与@media screen可以运用到网页自适应中。 @media与@media screen的区别 @media与@media screen在效果上是没区别的。但实际上是在于设备上的区别，@media screen中的CSS样式在打印机设备是无效的，而@media的CSS样式是可以运用在打印机设备的。 Demo教程: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF
CSS3 @media 媒体查询 实例源代码,调整浏览器窗口大小。当宽度小于300时，背景色变成淡蓝，否则淡绿色.zip
01-10
总结来说，这个实例展示了如何使用CSS3的`@media`媒体查询来实现响应式设计，根据设备视口宽度的不同，动态改变页面的背景颜色。这只是一个基本的应用，实际上，媒体查询可以用于控制更多复杂的布局和样式，包括字体...
全面解析CSS Media媒体查询使用操作（推荐）
01-19
　一说到响应式设计，肯定离不开媒体查询media。一般认为媒体查询是CSS3的新增内容，实际上CSS2已经存在了，CSS3新增了媒体属性和使用场景(IE8-浏览器不支持)。本文将详细介绍媒体查询的内容 媒介类型 　在CSS2中，...
详解关于使用媒体查询@meda失效原因的总结
09-22
媒体查询（Media Queries）是CSS3中的一个关键特性，它允许内容根据设备特性和视口尺寸来呈现，是实现响应式网页设计的核心技术。然而，实际应用中，媒体查询有时会出现失效的情况，以下是对这些失效原因的详细分析...
利用@media与@media screen进行响应式布局
天空一角的梦
07-07 2971
了解Media QueriesMedia Queries，其作用就是允许添加表达式用以媒体查询，以此来选择不同的样式表，从而自动适应不同的屏幕分辨率。css2里面虽然支持@media属性，但是能实现的功能比较少，一般只用做打印的时候做特殊定义的CSS，我们不去讨论。css3的@media属性在CSS3里面已经演变成一种 media queries（媒体查询/匹配）了,在CSS3里面，可以用查询语句...
CSS media属性的使用-兼容不同设备不同屏幕宽度的写法
飙歌的博客
11-18 1861
为了兼容不同设备排版问题，使用media属性对不同屏幕宽度的设备赋予不同的css值
@media （媒体查询）多个只生效一个最大的、不生效
qq_16733389的博客
01-06 1487
媒体查询的细节:（判断最小值，并且从小到大进行判断.如果是判断最大值，就应该从大到小写） 1.向上兼容：在窄屏设置的样式。默认在大屏也会存在； 2.向下覆盖：宽屏的样式设置会覆盖窄屏的样式设置； 1、如果判断最小值(min-width / min-height)，那么就应该从小到大写; body{ background: #f00; } @media screen and (min-width: 900px){ body { background: pink; } } @me
Web前端笔记-使用@media（媒体查询）展示及隐藏div
IT1995的博客
05-12 3333
这里主要实现的目标是实现当分辨率低了就隐藏，达到某个分辨率后就显示。 如下： 正常情况： 当页面变小后： 关键代码如下： @media (max-height: 600px) { .fas{display: none!important;} } @media (max-width: 300px) { .fas{display: none!important;} } 当max-height小于600px时 fas的display值为none。 当max-width小于300
@media使用顺序注意点
qq_41818857的博客
05-13 515
当你使用min-width时，需要从小到大 @media (min-width: 768px){ //>=768的设备 } @media (min-width: 992px){ //>=992的设备 } @media (min-width: 1200){ //>=1200的设备 } 当你使用max-width时，需要从大到小 @media (max-width: 1199){ //<=1199的设备 } @media (max-width: 991px){ //<=991的设
[CSS] 详细解释 @media 属性与 (max-width:) and (min-width) 之间的关系及用法
热门推荐
叶兴胜
10-10 2万+
[CSS] 详细解释 @media 属性与 (max-width:) and (min-width) 之间的关系及用法 原文   http://blog.qiji.tech/archives/10167 主题 CSS 前言 现在 HTML5/CSS3 很流行罢，也是未来时代的趋势。在 HTML5 带来的许多实用功能之后，CSS3也同带来了一些牛逼哄哄的功能呢。 动画 ani
响应式web设计之@media
weixin_30433075的博客
08-18 103
两种方式，一种是直接在link中判断设备的尺寸，然后引用不同的css文件： 1 <link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)"> 意思是当屏幕的宽度大于等于400px的时候，应...
@media 媒体查询
05-08
@media是CSS3中的一个重要特性，它可以根据不同的设备或者不同的屏幕尺寸来设置不同的CSS样式，实现页面在不同设备上的适配。媒体查询通过检查设备的特性（如屏幕宽度、高度、设备方向、分辨率等）来确定当前使用的设备类型，并根据不同的条件应用不同的CSS样式。 媒体查询语法格式为： ``` @media mediatype and (condition) { CSS样式代码 } ``` 其中，mediatype可以是all、screen、print等，condition是媒体查询条件，可以是屏幕宽度、高度、方向、分辨率等。 例如，下面的代码表示在屏幕宽度小于等于600px时应用的样式： ``` @media screen and (max-width: 600px) { body { background-color: #f00; } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值