media的使用规则

最新推荐文章于 2022-03-18 17:18:45 发布
最新推荐文章于 2022-03-18 17:18:45 发布
阅读量515 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Doulvme/article/details/72871252
版权

关于media的的使用规则，对于不同的浏览器设备或屏幕大小选择不同的css样式，可使用如下写法：

<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width:800px)"/>
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width:600px) and (max-width:800px)"/>
<link rel="stylesheet" type="text/css" href="styleC.css" media="screen and (max-width:600px)"/>

当屏幕小于800px时使用styleA.css，当屏幕大小在600px--800px之间时使用styleB.css，当浏览器屏幕小于600px时使用styleC.css样式表。

soosgo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解CSS3中@media的实际使用
09-25
总的来说，`@media`规则是CSS3中非常强大的一个功能，它使得开发者能够构建更加灵活和适应性的网页，无论用户使用的是桌面电脑、平板还是手机，都能获得优化的浏览体验。通过熟练掌握`@media`规则，你可以创建出更加...
linux v4l2架构分析之media_graph_walk_next
ismycsdn的博客
02-19 372
本文详细分析media_graph_walk_next函数代码，media_graph_walk_next用于深度优先遍历媒体设备节点之间的关系拓扑图，该函数只会遍历被使能的媒体节点，如果从最顶端的媒体节点开始遍历，能够查找到最底层的产生原始数据的sensor的媒体节点。
media_graph_walk_next
wmzjzwlzs的专栏
03-18 324
struct media_entity { struct media_gobj graph_obj; /* must be first field in struct */ const char *name; enum media_entity_type obj_type; u32 function; unsigned long flags; u16 num_pads; u16 num_links; u16 num_backlinks;...
在html样式@media,在CSS中嵌套@media规则
weixin_42485957的博客
06-21 582
简短的回答是，尽管在CSS3中允许嵌套@media规则(而不仅仅是媒体查询)，但在CSS2.1中不允许嵌套，这主要是因为没有理由允许它看到媒体查询尚不存在。Firefox是第一个支持嵌套@media规则的，但是自从这个答案第一次发布以来，其他浏览器已经慢慢赶上了。也就是说，Chrome(以及类似的，Blink Opera)已经更新以支持它。据我所知，Safari和IE仍然不支持它。有一些术语混乱，...
用CSS3的@media属性根据屏幕大小做自适应各种分辨率网页显示版本-media_query详解
和上帝躲猫猫
02-25 1万+
如今，电脑显示器的屏幕分辨率向越来越大发展，而手机等移动设备终端的分辨率却不可能大到哪里去。越来越多的网站，开始让自己的页面自适合各种分辨率，在小分辨率下显示基本的内容，在大分辨率下显示全部功能，甚至是分多等级的多版本。比如说我们熟悉的wordpress后台，当屏幕分辨率小于900px的时候，左边的侧栏就会变成收拢状态（@media only screen and (max-width:900px
媒体查询使用方法@media
abc2346789的博客
05-23 1187
Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。前面简单的介绍了Media Queries如何引用到项目中，但Media Queries有其自己的使用规则。具体来说,Media Queries的使用方法如下。 @media 媒体类型and （媒体特性）{你的样式} 注意：使用Media Queries必须要使用“@media”开头...
JS中使用media实现响应式布局
10-19
在上述内容中，我们看到了一系列的@media规则示例，它们用来指定不同屏幕宽度条件下的CSS样式。这些规则通常包括屏幕类型和两个关键的断点：最小宽度（min-width）和最大宽度（max-width）。例如： - 当屏幕宽度...
Media queries 使用示例
03-24
在响应式设计中，我们通常使用 `screen` 作为媒体类型，并针对不同设备的视口宽度编写规则。以下是一个简单的例子，当屏幕宽度小于600px时，我们将改变段落的字体大小： ```css @media screen and (max-width: 600...
详解CSS3中Media Queries的相关使用
09-25
首先，Media Queries的基础语法是在@media规则内指定媒体类型和媒体特性。媒体类型定义了输出设备的类别，例如屏幕（screen）、打印机（print）或是手持设备（handheld）等。媒体特性则进一步描述了设备的具体特征，...
CSS中规则@media的用法
weixin_34267123的博客
01-13 450
CSS中@规则是由@符号开始的，例如@import，@page等。 @media就是其中的一个规则。 @media可以让你根据不同的屏幕大小而使用不同的样式，这可以使得不需要js代码就能实现响应式布局。 不过@media只能用于较新的浏览器，对于老式的IE，不支持。下面是@media支持的浏览器。 @media的语法比较简单，一眼就能看懂。 @media mediatype and|...
@media语法规则
Daisukes的博客
10-19 2476
@media： ：[[',' ]*]? ：[only | not]? [and ]* | [and ]* ：'('[:]?')' 取值： ：指定设备类型。媒体类型包括：参阅媒体类型。(CSS2)：指定媒体查询使用的媒体特性。这类似于CSS属性，如：max-width:960px。(CSS3) 说明： 指定样式表规则用于指定的媒体类型和查询条件。
通过@media规则实现网页的屏幕自适应
wlx1991的专栏
12-27 1593
@media * {margin:0; border:0; padding:0;} /* 当浏览器窗口 @media screen and (max-width:400px) { #container {width:300px; height:500px; margin:auto; background:#F00;} } /* 当浏览器窗口 >= 401px 并且
基于RV1126平台imx291分析 --- open及media graph分析
ldl617的专栏
04-20 2816
Linux v4l2架构学习总链接 基于RV1126平台imx291分析 --- 先研究media再分析应用调用文章中一开始就被media相关的吓退了。 一星期的时间去研究media相关知识，现在终于可以动手了 rkcif_fh_open() static int rkcif_fh_open(struct file *filp) { struct video_device *vdev = video_devdata(filp); struct rkcif_vdev_node *vnode =
基于RV1126平台imx291分析 --- v4l2_pipeline_pm_use
ldl617的专栏
04-20 1533
Linux v4l2架构学习总链接 花了一个entity的链接简图，忽略了link 其中彩色线条是enable的，黑线是disable 使用上面的图来分析 v4l2_pipeline_pm_use，从stream_cif_mipi_id0这个entity开始 v4l2_pipeline_pm_use(&vnode->vdev.entity, 1); v4l2_pipeline_pm_use() int v4l2_pipeline_pm_use(struct media_.
CSS 自适应 @media 规则
weixin_43482769的博客
02-11 1415
应用场景 @media 规则在媒体查询中用于为不同的媒体类型/设备应用不同的样式。 媒体查询可用于检查许多事情，诸如： 视口的宽度和高度 设备的宽度和高度 方向（手机或平板电脑处于横屏还是竖屏模式？） 分辨率 应用示例 元素的背景颜色为白色，如果浏览器窗口的宽度为 600px 或更小时，把 元素的背景颜色更改为“浅蓝色”： body { background-color: white; } @media only screen and (max-width: 600px) { body
css的media中间值,关于css中@media的一些基本使用
weixin_30269201的博客
08-04 653
最近编写响应式的时候在使用@media用的不是很顺手，所以就记录一下方便查看基本语法：@media +( not | only) + 媒体类型 +(and+ 媒体查询)我们首先了解一下媒体类型，常用的不多，就几个：screen(电脑屏幕) ，print (打印或者打印预览)，all(所有设备)(本文侧重讲述screen，因为本人最近都用这个，嘻嘻)然后这个设备类型的作用是什么？答：用来匹配查询条...
@media的使用
weixin_30408675的博客
11-04 143
1.@media规则 1.1媒体类型： all:匹配所有设备； handle:匹配手持设备(小屏幕、单色、带宽有限)； print:匹配分页媒体或打印预览模式下的屏幕； screen:匹配彩色计算机屏幕； 其他媒体类型还有braille(盲文点字触觉反馈设备)、embossed(盲文分页打印机)、projection(投影仪)、speech(语音合成器)、tty(电...
@media的用法
热门推荐
flyqingfei的博客
03-27 1万+
今天总结了一些@media的用法
css自适应media规则
hins
11-30 1115
media规则 :根据屏幕分辨率来加载不同的css样式 /**控制导航的自适应---首页-分类页**/ @media screen and (max-width: 3000px) { .dp-nav > div{ width: 1040px !important; } } @media screen and (max-width: 1170px) { .dp-nav > d
vue使用@media screen
最新发布
07-28
1. 在Vue组件的 `<style>` 标签中定义样式，并使用@media screen来添加媒体查询规则。例如： ```css /* 默认样式 */ .my-element { color: blue; } /* 在屏幕宽度小于600px时应用的样式 */ @media screen ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值