您好,登录后才能下订单哦!
这期内容当中小编将会给大家带来有关怎么在CSS3 中使用@media 实现网页自适应,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
一、CSS2 中的@media
css2里面虽然支持@media属性,但是能实现的功能比较少,一般只用做打印的时候做特殊定义的CSS。
@media sMedia { sRules }
1.1、示例
// 设置显示器用字体尺寸 @media screen { BODY {font-size:12pt; } } // 设置打印机用字体尺寸 @media print { @import "print.css" BODY {font-size:8pt;} }
二、CSS3 中的@media
@media 属性在CSS3里面已经演变成一种 media queries
(媒体查询/匹配)了,在CSS3里面,可以用查询语句来匹配各种类型的屏幕。
语法:
@media mediatype and|not|only (media feature) { CSS-sRules; }
mediatype 媒体类型:all,print(打印机)、screen(电脑屏幕、手机等)、speech(屏幕阅读器等设备)
media_query and | not | only 媒体查询条件运算
media_feature 媒体特征,如最大宽度和最小宽度。
判断媒介(对象)类型来实现不同的展现。此特性让CSS可以更精确作用于不同的媒介类型。
2.1、示例
body{background:blue;}/*宽度500px-800px之间+高度100px-400px之间 蓝色*/ @media screen and (max-width:500px){body{background:green;}}/*宽度小于500px时 绿色*/ @media screen and (min-width:800px){body{background:red;}}/*宽度大于800px时 红色*/ @media screen and (max-height:100px){body{background:yellow;}}/*高度小于100px时 黄色*/ @media screen and (min-height:400px){body{background:pink;}}/*高度大于400px时 粉色*/
2.2、媒体特性
值 | 描述 |
---|---|
aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的比率 |
color | 定义输出设备每一组彩色原件的个数。如果不是彩色设备,则值等于0 |
color-index | 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0 |
device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的比率。 |
device-height | 定义输出设备的屏幕可见高度。 |
device-width | 定义输出设备的屏幕可见宽度。 |
grid | 用来查询输出设备是否使用栅格或点阵。 |
height | 定义输出设备中的页面可见区域高度。 |
max-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 |
max-color | 定义输出设备每一组彩色原件的最大个数。 |
max-color-index | 定义在输出设备的彩色查询表中的最大条目数。 |
max-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 |
max-device-height | 定义输出设备的屏幕可见的最大高度。 |
max-device-width | 定义输出设备的屏幕最大可见宽度。 |
max-height | 定义输出设备中的页面最大可见区域高度。 |
max-monochrome | 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。 |
max-resolution | 定义设备的最大分辨率。 |
max-width | 定义输出设备中的页面最大可见区域宽度。 |
min-aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的最小比率。 |
min-color | 定义输出设备每一组彩色原件的最小个数。 |
min-color-index | 定义在输出设备的彩色查询表中的最小条目数。 |
min-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最小比率。 |
min-device-width | 定义输出设备的屏幕最小可见宽度。 |
min-device-height | 定义输出设备的屏幕的最小可见高度。 |
min-height | 定义输出设备中的页面最小可见区域高度。 |
min-monochrome | 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数 |
min-resolution | 定义设备的最小分辨率。 |
min-width | 定义输出设备中的页面最小可见区域宽度。 |
monochrome | 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0 |
orientation | 定义输出设备中的页面可见区域高度是否大于或等于宽度。 |
resolution | 定义设备的分辨率。如:96dpi,300dpi,118dpcm |
scan | 定义电视类设备的扫描工序。 |
width | 定义输出设备中的页面可见区域宽度。 |
上述就是小编为大家分享的怎么在CSS3 中使用@media 实现网页自适应了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。