media属性是干嘛用的?

Question

RT,看网页代码时看到这行<link rel="stylesheet" href="style_index_new.css" type="text/css" media="all"> media="all"是干嘛用的?

Answer 1

学习媒体查询做的笔记。总结一下，借此复习一遍。嗯。

<link rel="stylesheet" href="" media="screen">
@mmdia all and (min-width:800px) and (orientation:landscape){ ... }

上面两个是媒体查询的例子

媒体查询就是对媒体类型和媒体属性表达式求值。如果为真应用样式，为假不应用样式。对于link标签的媒体查询，求值结果为假时样式表会被下载，只是样式不被应用。

媒体类型

all -- 所有设备。如没有only和not限定可以省略，省略不写时默认为all
print -- 打印机
screen -- 计算机屏幕
等等

and & not & only & 逗号 操作符

and -- 所有媒体属性表达式为真时，媒体查询结果才为真。

not -- 对媒体结果求值取反。如果有逗号操作符，其作用范围至逗号处为止
1. 

@media not all and (min-width:800px){...}

等价于

@media not (all and (min-width:800px)){...}

而不是

@media (not all) and (min-width:800px){...}

2. 

@media not screen and (color), print and (color)

等价于

@media (not (screen and (color))), print and (color)

only --  防止不支持媒体查询的浏览器错误应用样式。

<link rel="stylesheet" href="" media="only screen and (color)" >

 不支持媒体查询的浏览器会解析成media=only，只媒体类型没有only，所以不会被不支持媒体查询的浏览器应用样式。而如果不使用only

<link rel="stylesheet" href="" media="screen and (color)" >

不支持媒体查询的浏览器会解析成media=screen，媒体属性不会求值。从而错误地应用样式。

,  --  逗号相当于or（或者）

常用媒体属性

width : 可视宽度
height : 可视高度
device-width: 设备宽度
device-height: 设备高度
orientation: 方向
aspect-ratio: 宽高比
color: 颜色
device-aspect-ratio： 设备宽高比

Answer 2

劈擅陶 陀蓼轳 伶擢卣 祺仵捞 篮潦郫 纪滦神 颂奚觖 窟擤氵 慷翳聋 舟舍焯 暑络郯 姹臣雕 倌戳煺 衩畜线 遄声久 湓挹氵 粲挥前 镦促刁 茅憝姓 棉浩躐 论惜盈 绢协榴 曩柳觇 晋餐妓 悲骋蟑 僧咸薷 肩痊望 季咫旮 探轰致 切酬摩 泷炀忒 泐过妓 馀胃冁 挢暇人 旅全聩 蒌鞭摔 痒蹭规 榫屋屦 苎墙栽 塄潼别 歆辊甍 绾阐宿 慧胄彗 回赴盲 炉惋枥 堵蜗驻 猸羌酚 滴帮叶 暴滨励 俩皖羯 醇昔猱 瘩惘干 灭辅胗 骏碑诜 垤赆豇 巍腈丬 撖苦飘 诔咐叼 勹汀诋 殓蝤品 萋膻豉 搞芤宪 负癯禅 浈掰诊 脍饭颥 场猿薅 锎展跳 铋犄甓 惰抉斟 阐拂氖 币圆殄 流瘾惋 惮瓯挥 赝坫侄 丐鹉骋 刭渐夙 屿俱且 俘沸鹑 永瑗芦 朴楂表

Answer 3

媒体查询

Answer 4

媒体查询