linux建站和wordpress建站,网络工程师培训学校,wordpress 微博同步,中国承德media type(媒体类型)是CSS 2中的一个非常有用的属性#xff0c;通过media type我们可以对不同的设备指定特定的样式#xff0c;从而实现更丰富的界面。media query(媒体查询)是对media type的一种增强#xff0c;是CSS 3的重要内容之一。随着移动互联网的发展#xff0c;m… media type(媒体类型)是CSS 2中的一个非常有用的属性通过media type我们可以对不同的设备指定特定的样式从而实现更丰富的界面。media query(媒体查询)是对media type的一种增强是CSS 3的重要内容之一。随着移动互联网的发展media query开始得到大家的重视。 media type(媒体类型)
media type(媒体类型列)列表
让我们先了解一下media type其实这个大家会比较熟悉一点我们通常会用到的media type会是all 和screen然后是print一些网站会专门通过print类型为页面的打印格式提供更友好的界面。 其实media type有很多种
类型解释all所有设备braille盲文embossed盲文打印handheld手持设备print文档打印或打印预览模式projection项目演示比如幻灯screen彩色电脑屏幕speech演讲tty固定字母间距的网格的媒体比如电传打字机tv电视
media type的几种使用方法
我们可以通过几种方法来声明media type
方法一
通过link标签声明媒体类型
link hrefstyle.css mediascreen print ...
方法二
使用import语句导入CSS文件
import url(style.css) screen;
方法三
在style标签内使用import
style mediascreenimport url(style.css);
/style
方法四
使用media规则直接在CSS中定义媒体查询
media screen {selector{rules}
}
当然这几种方法各有利弊而我们常用的是第一种和最后一种方法。
media type的浏览器支持
IE5.5/6/7不支持在import中使用媒体类型media type这限制了其在这些旧版本浏览器中的应用Safari/firefox只支持allscreenprint三种类型(包括iphone)Opera 完全支持Opera mini 支持handheld未指定则使用screenWindows Mobile系统中的IE支持handheld其它支持不明… media query(媒体查询)
正如前文所说media query是CSS 3对media type的增强事实上我们可以将media query看成是media typecss属性判断。
请注意下面提到的一些关键字等内容有些是在media type中就可用的但是放到media query中将能更好的发挥其作用所以我就在适当的地方引入。
css属性判断可以只是某个CSS属性的名称也可以是属性值
link relstylesheet mediascreen and (animation)” herf“...”
如果设备支持CSS动画那么就能执行这个外部样式表文件。
media screen and (max-width:240px) {body {font-size: medium;}
}
如果设备的浏览器的最大宽度是240px则页面将使用中号字体。
PS属性和值之间是用冒号连接的而不是等号这与正常的CSS的写法一致。
媒体查询语句结构
我们可以将上述语句称为媒体查询语句这样也更能理解一些。从上面的例子也可以看出媒体查询语句一般由媒体类型media type 一到多个CSS属性判断组成而多个CSS属性判断可以用关键字and连接 and 操作符用来把多个媒体属性组合起来合并到同一条媒体查询中。只有当每个属性都为 真时这条查询的结果才为真。 media screen and (min-width:1024px) and (max-width:1280px) {body{font-size:medium;}
}
其中media type是可选的可以省略默认是全部all。 在Media Query中如果没有明确指定Media Type那么其默认为all。 media (color:4){...
}
属性值也可以为空
media (color){...
}
当然请注意有属性值和没有属性值的情况代表的意义是不一样的所以上面的这两条规则不是等价的。 如果你在未指定值的情况下创建媒体功能查询则该样式将全部被应用只要该查询的值不为零即可。例如上面媒体查询不带值的属性color将适用于任何带有彩色屏幕的设备。 而针对多个媒体类型的CSS规则可以用逗号来隔开
media handheld and (min-width:360px),screen and (min-width:480px){body{font-size:large;}
}
media screen and (min-width:800px),print and (min-width:7in){body{font-size:small;}
}
media query(媒体查询)支持的属性
事实上media query支持的属性和我们常用的CSS属性是不太一样的它们是一些特别定义的条目
属性值是否接受Min/Max前缀描述color整数yes每种色彩的字节数color-index整数yes色彩表中的色彩数device-aspect-ratio整数/整数yes宽高比例device-heightlengthyes设备屏幕的输出高度device-widthlengthyes设备屏幕的输出宽度grid整数no是否是基于格栅的设备heightlengthyes渲染界面的高度monochrome整数yes单色帧缓冲器中每像素字节resolution分辨率(“dpi/dpcm”)yes分辨率scanProgressive interlacednotv媒体类型的扫描方式widthlengthyes渲染界面的宽度orientationPortrait/landscapeno横屏或竖屏
从这些属性中我们可以看出media query就是为了更好的适配各种设备而生的。 参考media query 语法格式中的设备特性 浏览器的扩展
webkit是最早实现media query支持的浏览器内核之一同时它也根据自己的需要搞了一些特有的扩展属性最常用的有
transform-2d 只用于支持使用 -webkit-transform实现2D变换的浏览器transform-3d 只用于支持使用 -webkit-transform实现3D变换的浏览器transition 只用于支持使用-webkit-transition实现变换效果的浏览器animation 只用于支持使用-webkit-animation实现动画的浏览器
max与min
细心的同学可能已经注意到前面用到的这两个关键词他们是要配合支持它们的属性使用的它们的意义与我们常用的max-width和minwidth等类似。
各属性对max和min的支持在前面的属性列表中有给出这里是一个详细的列表
heightmin-heightmax-heightdevice-widthmin-device-widthmax-device-widthdevice-heightmin-device-heightmax-device-heightaspect-ratiomin-aspect-ratiomax-aspect-ratiodevice-aspect-ratiomin-device-aspect-ratiomax-device-aspect-ratiocolormin-colormax-colorcolor-indexmin-color-indexmax-color-indexMonochromemin-monochromemax-monochromeResolutionmin-resolutionmax-resolution
not/only
媒体类型还支持 not和only关键字它们可以用来更方便的定位某个媒体设备
not排除某种指定的媒体类型 not 操作符用来对一条媒体查询的结果进行取反换句话来说就是用于排除符合表达式的设备。 media not print and (color){
}
link relstylesheet medianot print and (max-width: 1200px) hrefprint.css /
only指定某种特定的媒体类型可以用来排除不支持媒体查询的浏览器 only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用。 media only screen and (color){
} 其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。 其主要有支持媒体特性Media Queries的设备正常调用样式此时就当only不存在对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备这样就会不读了样式因为其先读only而不是screen另外不支持Media Qqueries的浏览器不论是否支持only样式都不会被采用。 注意若使用了 not 或 only 操作符必须明确指定一个媒体类型。
media query的浏览器支持
IE 9以下不支持Firefox 3.5(Gecko 1.9.1)支持Opera 9.5完全支持Opera mini 5支持webkit 支持大部分属性(safari 3.0的内核版本是522iPhone 1代的safari的内核版本是524webkit大概从这个时候开始支持media query但是对部分属性比如projection支持不好)iPhone OS 3.2之前的版本不支持orientation属性iPad和iPhone 4支持该属性。iPhone Safari不支持orientation(iPhone 4支持)
现在我们可以梳理一下 media query 的使用流程 准备工作1设置Meta标签
首先我们在使用Media的时候需要先设置下面这段代码来兼容移动设备的展示效果
meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalableno
这段代码的几个参数解释
width device-width宽度等于当前设备的宽度initial-scale初始的缩放比例默认设置为1.0 minimum-scale允许用户缩放到的最小比例默认设置为1.0 maximum-scale允许用户缩放到的最大比例默认设置为1.0 user-scalable用户是否可以手动缩放默认设置为no因为我们不希望用户放大缩小页面 准备工作2加载兼容文件JS
因为IE8既不支持HTML5也不支持CSS3 Media所以我们需要加载两个JS文件来保证我们的代码实现兼容效果
!--[if lt IE 9]script srchttps://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js/scriptscript srchttps://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js/script
![endif]-- 准备工作3设置IE渲染方式默认为最高(这部分可以选择添加也可以不添加)
现在有很多人的IE浏览器都升级到IE9以上了所以这个时候就有又很多诡异的事情发生了例如现在是IE9的浏览器但是浏览器的文档模式却是IE8:
为了防止这种情况我们需要下面这段代码来让IE的文档模式永远都是最新的
meta http-equivX-UA-Compatible contentIEedge
不过又有一个更给力的写法
meta http-equivX-UA-Compatible contentIEEdgechrome1
怎么这段代码后面加了一个chrome1这个Google Chrome Frame谷歌内嵌浏览器框架GCF如果有的用户电脑里面装了这个chrome的插件就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算无比给力不过如果用户没装这个插件那这段代码就会让IE以最高的文档模式展现效果。这段代码还是建议大家用上不过不用也是可以的。 进入CSS3 Media
CSS3 media query的一般写法
media screen and (max-width: 960px){body{background: #000;}
}
其中css2的媒体查询
link relstylesheet typetext/css mediascreen hrefstyle.css
我们想知道移动设备是不是纵向放置的显示屏可以这样写
link relstylesheet typetext/css mediascreen and (orientation:portrait) hrefstyle.css
我们把第一段的代码也用CSS2来实现让它一样可以让页面宽度小于960的执行指定的样式文件
link relstylesheet typetext/css mediascreen and (max-width:960px) hrefstyle.css
但是上面这个方法最大的弊端是他会增加页面http的请求次数增加了页面负担我们用CSS3把样式都写在一个文件里面才是最佳的方法。
下面的写法是实现尺寸等于480px
media (max-device-height:480px) and (-webkit-min-device-pixel-ratio:2){//自己添加的样式
}
其中对于-webkit-min-device-pixel-ratio作如下解释
-webkit-min-device-pixel-ratio为1.0
所有非Retina的Mac所有非Retina的iOS设备Acer Iconia A500Samsung Galaxy Tab 10.1Samsung Galaxy S
-webkit-min-device-pixel-ratio为1.3
Google Nexus 7
-webkit-min-device-pixel-ratio为1.5
Google Nexus SSamsung Galaxy S IIHTC DesireHTC Desire HDHTC Incredible SHTC VelocityHTC Sensation
-webkit-min-device-pixel-ratio为2.0
iPhone 4iPhone 4SiPhone 5iPad (3rd generation)iPad 4所有Retina displays 的MACGoogle Galaxy NexusGoogle Nexus 4Google Nexus 10Samsung Galaxy S IIISamsung Galaxy Note IISony Xperia SHTC One X
番外移动设备显示尺寸大全
media screen and ( min-width: 212px){/*213px显示屏样式 LG Optimus One*/}
media screen and ( min-width: 319px){/*320px显示屏样式 苹果4/4S/5C/5S黑莓Z30 */}
media screen and ( min-width: 359px){/*360px显示屏样式 索尼Z1*/}
media screen and ( min-width: 383px){/*384px显示屏样式 黑莓Z10 谷歌 Nexus 6 LG Optimus G*/}
media screen and ( min-width: 399px){/*399px显示屏样式 三星galaxyNote*/}
media screen and ( min-width: 414px){/*414px显示屏样式 苹果6plus*/}
media screen and ( min-width: 423px){/*424px显示屏样式 LG 4X */}
media screen and ( min-width: 479px){/*480px显示屏样式 索尼MT27i Xperia sola*/}
media screen and ( min-width: 539px){/*640px显示屏样式 摩托罗拉Droid3/4/Razr Atrix 4g*/}
media screen and ( min-width: 639px){/*640px显示屏样式*/}
media screen and ( min-width: 640px){/*640px以上显示屏样式*/} 实例
现在让我们来看一些典型的例子
检测iPhone safari
link mediaonly screen and (max-device-width: 480px) hrefstyle.css
这是apple官方网站推荐的一种定位iPhone safari浏览器的方法在iPhone一代和2代的时代这条规则的确能够正确的判断出iPhone的浏览器但是后来出现了Android的大屏幕手机比如Nexus One和HTC desire这条规则也能适配这些480px宽度的机器。
android手机的多分辨率问题
android系统的开放性导致其终端的多样性那么对于各种各样的android手机来说屏幕分辨率的差异导致针对android手机的页面重构复杂性增加那么我们可以用media query为每种分辨率提供特定样式
/* for 240 px width screen */
media only screen and (max-device-width:240px){selector{}
}/* for 360px width screen */
media only screen and (min-device-width:241px) and (max-device-width:360px){selector{}
}/* for 480 px width screen */
media only screen (min-device-width:361px)and (max-device-width:480px){selector{}
}
device-aspect-ratio
语法device-aspect-ratioratio
取值ratio指定比率
说明 定义输出设备的屏幕可见宽度与高度的比率。如常讲的显示器屏幕比率4/3, 16/9, 16/10
版本支持IE9以及以上的浏览器开始支持
device-aspect-ratio可以用来适配特定屏幕长宽比的设备这也是一个很有用的属性比如我们的页面想要对长宽比为4:3的普通屏幕定义一种样式然后对于16:9和16:10的宽屏定义另一种样式比如自适应宽度和固定宽度
/* for 4:3 screen */
media only screen and (device-aspect-ratio:4/3){selector{}
}/* for 16:9 and 16:10 screen */
media only screen and (device-aspect-ratio:16/9) and (device-aspect-ratio:16/10){selector{}
}
示例
!DOCTYPE html
html langzh-cnheadmeta charsetutf-8 /titlemedia features device-aspect-ratio_CSS参考手册_web前端开发参考手册系列/titlestylemedia screen and (device-aspect-ratio: 16/10) {body {color: #f00;}}/style/headbodydiv classtest当你将输出设备屏幕分辨率为16:10时本行文字显示为红色/divscript/script/body
/htmldevice-aspect-ratio特性接受min和max前缀因此可以派生出min-device-aspect-ratio和max-device-aspect-ratio两个媒体特性。
例如判断屏幕横屏
media screen and (min-aspect-ratio: 13/8) {...
}
O’Reilly区分iPhone和iPad的方法
O’Reilly为其网站制作了针对iPad和iPhone设备的不同版本从而提供最适合相关设备阅读的界面他们的做法就是使用media query
link relstylesheet mediaall and (max-device-width: 480px) hrefiphone.css
link relstylesheet mediaall and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) hrefipad-portrait.css
link relstylesheet mediaall and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) hrefipad-landscape.css
link relstylesheet mediaall and (min-device-width: 1025px) hrefipad-landscape.css 小结媒体查询的基本语法
媒体查询通过在CSS中使用media规则来实现可以包含一种或多种媒体特性如宽度width、高度height或方向orientation。一个基本的媒体查询可能如下所示
media (media-type and|not|only (media-feature)) { /* 在这里编写相应的样式 */ }
其中media-type表示媒体类型如screen屏幕、print打印等media-feature是媒体特性如width宽度、height高度、orientation方向等。
媒体查询的逻辑操作符
媒体查询支持逻辑操作符如and、not、only可以将多个媒体特性进行组合以更精确地匹配目标设备。例如
and相当于“且”表示多个条件同时满足。not相当于“非”用于排除某个媒体类型。only用于指定某个特定的媒体类型但通常可以省略。
示例代码
1. 根据屏幕宽度调整样式
media screen and (max-width: 600px) {body {background-color: lightblue;}
} 这条规则意味着当屏幕宽度小于或等于600像素时背景颜色变为浅蓝色。
2. 根据屏幕方向调整样式
media screen and (orientation: landscape) {body {background-color: yellow;}
}
这条规则表示当屏幕为横向时背景颜色变为黄色。
3. 根据设备类型调整样式
media print {body {background-color: white;}
}
这条规则表示在打印时背景颜色变为白色。 参考资料
响应式之媒体查询技术_媒体查询-儒雅烤地瓜的CSDN博客
媒体查询支持ie浏览器各版本的写法_ie 媒体查询-CSDN博客
媒体查询(media)-CSDN博客 | 媒体查询(media语法、案例)详解 - CSDN博客
媒体查询media - 简书 | 响应式布局之媒体查询(media-queries) - 简书
JS 媒体查询的基本用法 _ 51CTO博客 | 媒体查询(media query) - 看云 | 媒体查询总结 - 博客园
