媒体查询语句-技术-艺小六飞

什么是媒体查询技术？

媒体查询结束可以让一套网页在不同屏幕宽度的设备上显示不同的风格样式，最早的bootstrap框架的自适应页面用到了媒体查询技术，后来国内出现了各种各样能自适应屏幕宽度的前端框架，其自适应变化的核心代码就是用媒体查询结束实现的。

css3媒体查询技术如下：

第一种方法：把不同屏幕尺寸下的效果css样式写在一个css样式文件中（这样的执行效率较高）

@media screen and (min-width:320px) and (max-width:480px) {

.navbar-wrapper { font-size: 100%; color: #333; }

}

@media screen and (min-width:480px) and (max-width:680px) {

.navbar-wrapper { font-size: 1.5em; color: #666; }

}

@media screen and (min-width:680px) {

.navbar-wrapper { font-size: 2em; color: #999; }

}

第二种方法：通过<link>标签把不同尺寸下的样式表引入到html中

这几行代码是媒体查询技术的核心思想，掌握这几行代码，不用框架你也可以写出自己喜欢的自适应页面。