一般情况下，希望设计的网页在不同宽度的屏幕上都能正常显示。但因为屏幕宽度不同，使用同样的版面样式难以兼容，常见的方式是使用不同的CSS来定义不同的版面。CSS有条件过滤语法，配合屏幕宽高查询，以适应屏幕不同情况下的使用。一种使用方法为：
<link rel="stylesheet" media="only screen and (min-device-width:800px)" href="tablet.css">
<link rel="stylesheet" media="only screen and (max-device-width:799px)" href="mobile.css">
其中使用的是min-device-width和max-device-width，是设备屏幕的物理尺寸。如果使用的是min-width和max-width，当在电脑上调整浏览器的尺寸时就会出现样式的改变，可以用这种方式来模拟测试手持终端上的显示效果，而不需要每次调整后都上传并用手机来测试。
还有另一种使用@media的引用方式：
@import url(/tablet.css) screen and (min-device-width:800px);
@import url(/mobile.css) screen and (max-device-width:799px);
或者使用：
@media screen and (min-device-width:800px) {
......
}
@media only screen and (max-device-width:799px) {
......
}
将样式直接写在大括号中，只有在规则返回true时其中的CSS才被应用，否则浏览器将不会理会。
虽然CSS语法中给出了handhold媒体类型，但手持设备上的浏览器往往并不会用此来判断是否为手持终端，而同样是使用screen类型，所以只能用屏幕宽度来进行判断。