多媒体查询

CSS的媒体查询是一种CSS的技术它可以根据不同的设备类型、屏幕尺寸、方向、分辨率等条件来应用不同的CSS样式从而为不同的设备和屏幕提供最佳的浏览体验。

这样当用户使用不同的设备或屏幕浏览网页时网页的样式表现可以根据不同的条件自动进行调整以保证页面的最佳显示效果。

例如在移动设备上可以使用媒体查询来设置更小的字体大小更紧凑的布局等等以提高可读性和用户体验。

(1)

媒体修饰词not(非限制)、only(唯一限制)、不写前二者(即所有不限制)(3)

mediaType媒体类型all(所有)、print(打印机)、screen(屏幕)、speech(屏幕阅读器)等等可参考媒体功能部分

示例代码

总结max-width确定了右边界所以对应的媒体样式执行的条件就是(0,max-width]min-width确定了左边界所以对应的媒体样式执行的条件就是[min-width,∞)

手机屏幕

url(mobile.css);/*这里写针对手机屏幕的样式*/

}/*

url(computer.css);/*这里写针对普通电脑屏幕的样式*/

大屏电脑屏幕

url(big-computer.css);/*这里写针对大屏电脑屏幕的样式*/

媒体功能参考列表

值描述aspect-ratio定义输出设备中的页面可见区域宽度与高度的比率color定义输出设备每一组彩色原件的个数。

如果不是彩色设备则值等于0color-index定义在输出设备的彩色查询表中的条目数。

如果没有使用彩色查询表则值等于0device-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定义在一个单色框架缓冲区中每像素包含的单色原件个数。

如果不是单色设备则值等于0orientation定义输出设备中的页面可见区域高度是否大于或等于宽度。

resolution定义设备的分辨率。

如96dpi,

300dpi,

118dpcmscan定义电视类设备的扫描工序。

width定义输出设备中的页面可见区域宽度。