CSS媒体查询中，screen and 和 only screen and 有什么不同，only关键字的作用讲解

最新推荐文章于 2022-11-26 19:33:26 发布
最新推荐文章于 2022-11-26 19:33:26 发布
阅读量2.5k 收藏 2
点赞数
文章标签： css only css3 关键字 媒体查询
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cry_shoulder/article/details/104653143
版权

假如有如下代码

<link rel="stylesheet" media="screen and (min-width: 401px) and (max-width: 600px)" href="iphone.css" />

在老版本浏览器只会被翻译成 

<link rel="stylesheet" media="screen" href="iphone.css" />

而不会去识别后面的 and (min-width: 401px) and (max-width: 600px)，所以说只要是screen媒体类型，不管宽度多宽，后面的样式表都会被渲染。

而假如加了only关键字的话，例如如下代码

<link rel="stylesheet" media="only screen and (min-width: 401px) and (max-width: 600px)" href="iphone.css" />

在老版本浏览器中则会被翻译成

<link rel="stylesheet" media="only" href="iphone.css" />

 因为并没有什么媒体类型是"only"，所以浏览器也不会去渲染后面的样式表。

cry_shoulder
关注
CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全
51yunOA
04-16 2000
文章目录 媒体查询介绍 Media Queries具体使用 一、最大宽度Max Width 二、最小宽度Min Width 三、多个Media Queries使用 四、设备屏幕的输出宽度Device Width 五、iPhone4 六、iPad 七、android 八、not关键字 九、only关键字 十、其他 媒体查询之device-aspe...
html过渡的触发机制是什么,【前端Talkking】CSS系列-一步一步带你认识transition过渡效果...
weixin_29713403的博客
06-18 1605
1、前言transition从网页效果上来看是一种平滑过渡的动画，本质上是在一定的时间内将属性的状态从初始值过渡到结束值。如果不添加transition过渡，在网页中点击鼠标、获得焦点等操作将导致css的值在瞬间完成，看起来比较生硬，而添加了过渡效果，可以实现平滑的过渡，增加用户体验。在使用的使用需要加浏览器前缀：-webkit-transition-moz-transition-o-transi...
响应式布局设置--@media only screen and
lhf2009913的专栏
04-24 796
@media only screen and  only(限定某种设备) screen 是媒体类型里的一种 and 被称为关键字，其他关键字还包括 not(排除某种设备) /* 常用类型 */ 类型 解释 all 所有设备 braille 盲文 embossed 盲文打印 handheld 手持设备 print 文档打印或打印预览模式 projection 项目演示，
媒体查询，screen and 和only screen and有什么不同
weixin_30319097的博客
07-25 639
最佳答案： 彩屏设备 和 (最小宽度768px) 和 (最大宽度959px)仅限 彩屏设备 和 (最小宽度480px) 和 (最大宽度767px)在你发的代码中其实没有什么不同，用起来效果都是一样的。下面这样用only才有效果：@media all and (min-width:xxx) and (max-width:xxx){/*这段查询的all是针对所有设备(有些设备不一定是屏幕，也许是打字...
响应式布局@media only screen and 解释以及demo
好吗好的~的技术博客
09-26 5766
摘自：https://blog.csdn.net/qq_34960569/article/details/51775737 only(限定某种设备) screen 是媒体类型里的一种 and 被称为关键字，其他关键字还包括 not(排除某种设备) /* 常用类型 */ 类型 解释 all 所有设备 braille 盲文 embossed 盲文打印 handheld 手持设备 print 文档打...
css媒体查询
m0_49378755的博客
05-12 135
媒体查询的基础使用
媒体查询中“屏幕”和“仅屏幕”之间有什么区别？
asdfgh0077的博客
05-07 598
What is the difference between screen and only screen in media queries? 媒体查询中screen与only screen之间有什
微信小程序中的 Flex box 媒体查询
在 Flex box 布局中，我们可以通过简单的属性控制实现灵活的布局，使得页面元素能够自适应不同的屏幕尺寸和设备方向。 ## 1.2 Flex box 布局在微信小程序中的应用 在微信小程序开发中，Flex box 布局被广泛应用于...
全宇宙最深入的CSS3 姬成 渡一学习记录
m0_46424423的博客
07-21 1265
全宇宙最深入的CSS3 一、introduction 兼容性前缀 prefix（前缀） browser -webkit chrome/safari -moz firefox -ms IE -o opera 1.历史 更新迭代，兼容性 ---- 加不加前缀 div{ border-radius: ; -webkit-border-radius:; -o-border-radius:; -moz-border-radius:; } 兼容性手册
响应式布局 初步移动端1
08-03
本篇文章将详细讲解响应式布局的初步知识，主要涵盖六个核心概念：媒体类型、关键字、媒体特性、媒体查询、viewport视口以及rem公式。 一、媒体类型 媒体类型定义了样式表应用于哪种类型的设备。常见的媒体类型包括...
媒体查询 @media
熊小露的博客
09-22 780
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面 实例： @media screen and (max-width: 300px) { body { background-color:lightblue; } } ...
CSS知识点：媒体查询
(づ｡◕‿‿◕｡)づgigi奋斗在前端和刷题中╮(╯﹏╰)╭
01-02 513
概述媒体查询可以根据用户所使用的的设备或显示器特性来自定义样式，从而实现适配不同终端的网页效果。下面是一个例子：@media screen and (max-width: 600px) { .facet_sidebar { display: none; } }语法媒体查询包含： 媒体类型 all：适用于所有设备，默认值 print：打印 screen：显示器 speech：语音合
媒体查询使用详解
EmotionComputer
12-21 6419
一. 媒体查询的历史： 很多朋友认为媒体查询是CSS3新增，事实并非如此。媒体查询在CSS3之前早已存在，只是比较粗放一些，仅用来区分媒体的类型。 看如下简单代码实例： <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" /> <link href="css/style.css" r...
如何做一个自适应网页
想去旅行的静静的博客
09-18 6792
如何做一个自适应网页？ 允许网页宽度自动调整 <meta name="viewport" content="width=device-width, initial-scale=1" /> 网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。 所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。 　　&
CSS中 @media screen 和@media only screen 和@media 的不同
LUCKY XING的博客
08-13 4682
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使用总结
最新发布
weixin_41886421的博客
11-26 2536
@media 媒体查询使用方法总结
移动端入门
weixin_48494427的博客
03-21 644
分栏：媒体查询：单位：盒子模型：media查询：flexible脚本：
响应式布局设置--@media only screen
光英的记忆博客
02-01 3359
only(限定某种设备) screen 是媒体类型里的一种 and 被称为关键字，其他关键字还包括 not(排除某种设备) /* 常用类型 */ 类型 解释 all 所有设备 braille 盲文 embossed 盲文打印 handheld 手持设备 print 文档打印或打印预览模式 projection 项目演示，比如幻灯 screen 彩色电脑屏幕 speech 演讲 tty 固定字母间距的网格的媒体，比如电传打字机 tv 电视 screen一般用的比较多，下面是我自己的尝试，列出常用的设备的尺
CSS - 响应式布局
LIN的博客
09-27 487
  概念 随着网页大小的改变，而改变布局的响应方式。 例如：https://www.golaravel.com/ 实现方式 - interger 设置触发宽度 网页小于&lt;integer&gt;设定宽度 @media only screen and (max-width: &lt;integer&gt;) {    selector {           ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值