css3媒体查询为什么不见max
答案:1 悬赏:0 手机版
解决时间 2021-02-22 20:26
- 提问者网友：佞臣
- 2021-02-22 13:37
css3媒体查询为什么不见max
最佳答案
- 五星知识达人网友：何以畏孤独
- 2021-02-22 14:09
一、在 链接CSS文件时提供判断语句，选择性加载不同的CSS文件
Html代码
这句意味在满足 media 的判断语句 screen and (min-width: 400px) 即 屏幕并且最小宽度不小于400px 的介质上面使用 middle.css 。
二、在CSS文件中分段书写不同设备的代码
Html代码
@media screen and (min-width: 600px) { }
@media screen and (max-width: 599px) { }
相信这个代码也很容易理解，写在 @media 语句段外的是共用代码，第一个 @media 语句段是 屏幕以及最小宽度600px ，第而个 @media 语句段是 屏幕以及最大宽度599px 。
如果不同的代码段有冲突或者重叠，会按照CSS原本的代码优先级排序，即后方代码替代前方代码，等等。
三、媒体介质类型
CSS3中提供了多种媒体介质类型，虽然常用的就俩……注意媒体类型名称区分大小写，并且尽管有些介质类型有重合，但是一个平台只会有一种介质类型。（我猜这个标准很多浏览器不会遵守吧？）
all – 全部媒体类型
braille – 盲文触摸装置
embossed – 分页盲文打印机 （W3C的无障碍做的真细心……）
handheld – 小屏幕和流量有限的手持设备（注意！安装标准来说移动设备都应该使用这个介质类型，但是实际上安卓根本不理会这个介质，请使用 screen 结合媒体查询语句使用）
print – 提供给打印机的样式，最常用的介质类型，打印页面时获得适合阅读的效果
projection – 投影，给投影机使用（有人用？）
screen – 彩色屏幕，最常用的介质类型，一般和屏幕大小表达式联合使用
speech – 语音朗诵，用于屏幕阅读软件（和将来的Siri？）
tty – 固定间距字符网格，例如功能机那样的
tv – 智能电视设备（唔不知道我家的创维酷开支持如何……）
四、媒体查询语句
除了媒体介质，我们还能通过 and 使用 Media Query 语句，达到对屏幕大小的判断生成响应式布局。（可以通过改变浏览器窗口大小在桌面下测试效果）
一个 Media Query 包含一种媒体类型，如果媒体类型没有指定，那么就是默认类型all，比如：
Html代码
media="(max-width: 600px)"
也可以使用 and 表示同时满足这两者时生效，达到限定范围：
Html代码
handheld and (min-width:20em) and (max-width:50em)
逗号 , 被用来表示 并列 和 或者 ：
Html代码
handheld and (max-width:20em), screen and (max-width:30em)
not 用来排除符合表达式的设备：
Html代码
not screen and (color)
下面来解释一下遇到冲突时的机制：
Html代码
上面将设备分成3种，分别是宽度大于800px时，应用 styleA ，宽度在600px到800px之间时应用 styleB ，以及宽度小于600px时应用 styleC 。那假如宽度正好等于800px时该应用那个样式？是 styleB，因为前两条表达式都成立，按CSS默认优先级规则后者覆盖了前者。
因此，为了避免冲突，这个例子正常情况应该这样写：
Html代码
五、浏览器支持
媒体介质在CSS2中已经被添加，因此主流平台的浏览器毫无疑问都可以正确支持。但是 Media Query 语句是CSS3中添加的新功能，部分浏览器可能并不理解。例如IE能成功解读媒体介质，但是却无法解读 and 后面的媒体查询语句，就会连带媒体介质一起忽略。为了让不识别媒体查询语句的浏览器依然识别到媒体介质，可以使用 only 关键字进行hack。
Html代码
添加了 only 关键字后，支持媒体查询语句的浏览器依然正常解析。但不支持媒体查询语句但正确读取媒体介质的设备，由于先读取到 only 而不是 screen ，将忽略这个样式。不支持媒体查询的IE不论是否有 only ，都直接忽略样式。
最后是浏览器支持情况：
IE8-
IE9+
Chrome 5+
Opera 10+
Firefox 3.6+<
Safari 4+
Html代码
这句意味在满足 media 的判断语句 screen and (min-width: 400px) 即 屏幕并且最小宽度不小于400px 的介质上面使用 middle.css 。
二、在CSS文件中分段书写不同设备的代码
Html代码
@media screen and (min-width: 600px) { }
@media screen and (max-width: 599px) { }
相信这个代码也很容易理解，写在 @media 语句段外的是共用代码，第一个 @media 语句段是 屏幕以及最小宽度600px ，第而个 @media 语句段是 屏幕以及最大宽度599px 。
如果不同的代码段有冲突或者重叠，会按照CSS原本的代码优先级排序，即后方代码替代前方代码，等等。
三、媒体介质类型
CSS3中提供了多种媒体介质类型，虽然常用的就俩……注意媒体类型名称区分大小写，并且尽管有些介质类型有重合，但是一个平台只会有一种介质类型。（我猜这个标准很多浏览器不会遵守吧？）
all – 全部媒体类型
braille – 盲文触摸装置
embossed – 分页盲文打印机 （W3C的无障碍做的真细心……）
handheld – 小屏幕和流量有限的手持设备（注意！安装标准来说移动设备都应该使用这个介质类型，但是实际上安卓根本不理会这个介质，请使用 screen 结合媒体查询语句使用）
print – 提供给打印机的样式，最常用的介质类型，打印页面时获得适合阅读的效果
projection – 投影，给投影机使用（有人用？）
screen – 彩色屏幕，最常用的介质类型，一般和屏幕大小表达式联合使用
speech – 语音朗诵，用于屏幕阅读软件（和将来的Siri？）
tty – 固定间距字符网格，例如功能机那样的
tv – 智能电视设备（唔不知道我家的创维酷开支持如何……）
四、媒体查询语句
除了媒体介质，我们还能通过 and 使用 Media Query 语句，达到对屏幕大小的判断生成响应式布局。（可以通过改变浏览器窗口大小在桌面下测试效果）
一个 Media Query 包含一种媒体类型，如果媒体类型没有指定，那么就是默认类型all，比如：
Html代码
media="(max-width: 600px)"
也可以使用 and 表示同时满足这两者时生效，达到限定范围：
Html代码
handheld and (min-width:20em) and (max-width:50em)
逗号 , 被用来表示 并列 和 或者 ：
Html代码
handheld and (max-width:20em), screen and (max-width:30em)
not 用来排除符合表达式的设备：
Html代码
not screen and (color)
下面来解释一下遇到冲突时的机制：
Html代码
上面将设备分成3种，分别是宽度大于800px时，应用 styleA ，宽度在600px到800px之间时应用 styleB ，以及宽度小于600px时应用 styleC 。那假如宽度正好等于800px时该应用那个样式？是 styleB，因为前两条表达式都成立，按CSS默认优先级规则后者覆盖了前者。
因此，为了避免冲突，这个例子正常情况应该这样写：
Html代码
五、浏览器支持
媒体介质在CSS2中已经被添加，因此主流平台的浏览器毫无疑问都可以正确支持。但是 Media Query 语句是CSS3中添加的新功能，部分浏览器可能并不理解。例如IE能成功解读媒体介质，但是却无法解读 and 后面的媒体查询语句，就会连带媒体介质一起忽略。为了让不识别媒体查询语句的浏览器依然识别到媒体介质，可以使用 only 关键字进行hack。
Html代码
添加了 only 关键字后，支持媒体查询语句的浏览器依然正常解析。但不支持媒体查询语句但正确读取媒体介质的设备，由于先读取到 only 而不是 screen ，将忽略这个样式。不支持媒体查询的IE不论是否有 only ，都直接忽略样式。
最后是浏览器支持情况：
IE8-
IE9+
Chrome 5+
Opera 10+
Firefox 3.6+<
Safari 4+
我要举报
如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！
点此我要举报以上问答信息
大家都在看
推荐资讯