媒体查询可以根据设备显示器的特性设定CSS的样式

媒体查询

媒体查询可以根据设备显示器的特性设定CSS的样式

媒体查询可以根据设备显示器的特性(如视口宽度,屏幕比例和设备方向),设定CSS的样式。媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width,height和color等,使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。使用媒体查询的操作步骤如下:


1.在HTML页面<head>标签中,添加viewport属性的代码.

2.使用@media媒体查询可以针对不同的媒体类型定义不同的样式,特别是响应式页面.

 

打开火狐浏览器,在浏览器的右上角找到隐藏菜单栏按钮并点击,在弹出的菜单栏中,找到【Web开发者】并点击,在【Web开发者】栏下,找到【响应式设计模式】并点击当前网页就进入了响应式设计模式,可随便拖动该网页四周改变网页的大小.

                                   

上述的代码通过媒体查询定义了几套样式,通过max-width设置样式生效时的最大分辨率,上述的代码分别对分辨率在0~320px,320px~550px,550px~768px以及768px~960px的屏幕设置了不同的背景颜色。


通过媒体查询,可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局,比如我们为不同分辨率的屏幕,设置不同的背景图片。比如给小屏幕手机设置@2x图,为大屏幕手机设置@3x图,通过媒体查询就能很方便的实现。但是媒体查询的缺点也很明显,如果在浏览器大小改变时,需要改变的样式太多,那么多套样式代码会很繁琐。