@media 和 @media screen的区别

媒体查询与打印样式
最新推荐文章于 2025-10-30 19:33:10 发布
原创 最新推荐文章于 2025-10-30 19:33:10 发布 · 1.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了媒体查询 (@media) 在响应式布局 (ResponsiveLayout) 中的应用，特别是在用户打印页面时的效果。通过对比分析，文章指出 @media 指令在打印场景下更为有效，建议进行实际测试以验证其表现。

应该说两者在Responsive Layout上面展现效果是一样的 但是只有 @media这个指令在用户打印的时候有效，具体怎样需要测试

其实侧面说明了 @media更有效吧，如果有不对的可以指出来

raymondlin9292
关注
使用CSS @media实现响应式设计
weixin_66708577的博客
02-10 1226
media。
利用css3的@media screen实现网页布局的自适应（响应式布局）
未曾远去
07-10 5185
准备工作1：设置Meta标签 可以参考-->自适应电脑/平板/手机，自适应网页设计 首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果： <metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"&g...
@media与@media screen的区别
firstbird的博客
06-30 1812
在网站自适应设计中，@media与@media screen是必须用到的css代码，可能大家对此并不陌生。但是大家又知不知道@media与@media screen的区别在哪呢？在自适应设计中你是用@media还是用@media screen？你知不知道两者产生的结果有什么不同呢？这些问题我想很多人都不清楚吧。本文便通过实例给你说说@media与@media screen的区别，主要是告诉你它们产生的效果区别在哪。 @media与@media screen手机网页区别 好吧，理论方面暂时放在一边，先看看两者
实例讲解@media与@media screen的区别
tornge的博客
05-14 1145
在网站自适应设计中，@media与@media screen是必须用到的css代码，可能大家对此并不陌生。但是大家又知不知道@media与@media screen的区别在哪呢？在自适应设计中你是用@media还是用@media screen？你知不知道两者产生的结果有什么不同呢？这些问题我想很多人都不清楚吧。本文便通过实例给你说说@media与@media screen的区别，主要是告诉你
响应式布局：媒体查询@media用法
最新发布
2501_93895906的博客
10-30 264
是 CSS3 的核心功能，用于根据设备特性（如屏幕宽度、分辨率、方向等）动态调整样式，实现响应式布局。
CSS中 @media screen 和@media only screen 和@media 的不同
LUCKY XING的博客
08-13 4799
CSS中 @media screen 和@media only screen 和@media 的不同@media screen and (max-width:632px)This one is saying for a device with a screen and a window with max-width of 632px apply the style. This is almost i
利用@media与@media screen进行响应式布局
天空一角的梦
07-07 3176
了解Media QueriesMedia Queries，其作用就是允许添加表达式用以媒体查询，以此来选择不同的样式表，从而自动适应不同的屏幕分辨率。css2里面虽然支持@media属性，但是能实现的功能比较少，一般只用做打印的时候做特殊定义的CSS，我们不去讨论。css3的@media属性在CSS3里面已经演变成一种 media queries（媒体查询/匹配）了,在CSS3里面，可以用查询语句...
让@media screen兼容ie8/ie7/ie6
03-09
Respond.js让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持媒介查询，亲测可用。（注意：需要大家放到服务器上再使用，不能跨域使用，放到虚拟空间中也可以进行测试，本地测试ie6-8无效果）
详解CSS3中@media的实际使用
09-25
在CSS3中，`@media`规则是响应式网页设计的核心，它允许我们根据不同的设备特性和视口大小来定义和应用不同的样式。`@media`查询让我们能够创建适应各种屏幕尺寸、分辨率和颜色深度的多样的用户体验。 首先，我们来...
JS中使用media实现响应式布局
12-04
`@media`查询是CSS3引入的一个特性，用于定义在特定的媒体类型和条件下的样式规则。例如，我们可以根据屏幕宽度、设备像素比等属性来定义不同的样式。基本语法如下： ```css @media media-type and (condition) ...
css 根据不同屏幕设置间距_css如何根据不同分辨率显示不同宽度布局？
weixin_35657099的博客
02-23 1212
css如何根据不同分辨率显示不同宽度布局？下面本篇文章给大家介绍一下css判断不同分辨率显示不同宽度布局实现自适应宽度的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。css判断不同分辨率显示不同宽度布局实现自适应宽度CSS DIV网页布局中当分辨率小于等于1024px(像素)时，DIV布局对象显示1000px宽度，当分辨率大于1024px时候显示1200px宽度等需求。使...
CSS的@media与@media screen，媒体查询
jingjing的博客
02-20 3863
在网站自适应设计中，@media与@media screen是经常会用到的css代码，其功能就是为不同的媒体设置不同的css样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等。 @media与@media screen区别 @media与@media screen两者在电脑&手机设备上没有区别，但@media screen的css在打印设备里是无效的，而@media在打印设备里是有效的，如果css需要用在打印设备里，就用@media；否则，就用@media screen。 不过这只是笼统的做法，其实如
媒体查询(media)-screen
weixin_48879122的博客
08-26 2112
该文章讲述了常用的媒体查询怎么使用，并对开发中最常用的screen媒体特性进行了讲解；最后的demo中展示了css三大特性之一-层叠性。
使用CSS的@media screen 规则为不同的屏幕尺寸设置不同的样式(响应式图片布局)
昊虹AI笔记
08-26 4701
使用CSS的@media screen 规则为不同的屏幕尺寸设置不同的样式(响应式图片布局)
css3 media媒体查询器用法总结
小迷童
01-15 2626
随着响应式设计模型的诞生，Web网站又要发生翻天腹地的改革浪潮，可能有些人会觉得在国内IE6用户居高不下的情况下，这些新的技术还不会广泛的蔓延下去，那你就错了，如今淘宝，凡客，携程等等公司都已经在大胆的尝试了这项技术，并完美的应用在了自己的网站上了。再不更新知识你就老了。我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法。 准备工作1：设置Meta标签
利用@media screen实现网页布局的自适应
weixin_30951743的博客
09-13 202
经常为不同分辨率设备或不同窗口大小下布局错位而头疼,可以利用@media screen实现网页布局的自适应,优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值以下是针对自用主题而写的css,对宽度768以下设备只保留主要文章框架,以便在有限的空间里获得最佳阅读体验 @media screen and...
响应式布局这件小事（转）
weixin_30932215的博客
07-05 438
讲到响应式布局，相信大家都有一定的了解，响应式布局是今年很流行的一个设计理念，随着移动互联网的盛行，为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果，设计师提出了响应式布局的设计方案。今天就和大家来讲讲响应式布局这件小事，包含什么是响应式布局、响应式布局的优点和缺点以及响应式布局该怎么设计（通过CSS3Media Query实现响应布局）。 一、什么是响应式布局? 响...
@media only screen和@media screen效果不一样吗
02-04
@media only screen和@media screen是CSS中用于响应式设计的媒体查询规则。它们的效果是不一样的。...所以，它们的区别在于@media only screen只在屏幕上显示时生效，而@media screen在任何屏幕设备上都生效。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值