css如何设置不同分辨率下的样式？
在写响应式网页的时候，我们需要网页有几种显示方式，我们可以用CSS实现这个功能
使用CSS提供的媒体查询，我们可以根据屏幕分辨率来使用相应的CSS样式
@media 媒体查询
@media 媒体查询选择性加载css，意思是自动探测屏幕宽度，然后加载相应的CSS文件。可以针对不同的屏幕尺寸设置不同的样式，当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面，这对调试来说是一个极大的便利。
语法：
@media mediaType and|not|only (media feature) {
/*CSS-Code;*/
}媒体类型（mediaType ）
类型有很多，在这里不一一列出来了，只列出了常用的几个。
| 值 | 描述 |
|---|---|
| all | 用于所有设备 |
| 用于打印机和打印预览 | |
| screen | 用于电脑屏幕，平板电脑，智能手机等。（最常用） |
| speech | 应用于屏幕阅读器等发声设备 |
媒体功能（media feature）
媒体功能也有很多，以下列出常用的几个
| 值 | 描述 |
|---|---|
| max-width | 定义输出设备中的页面最大可见区域宽度 |
| min-width | 定义输出设备中的页面最小可见区域宽度 |
示例：
1、如果文档宽度小于等于 300px 则应用花括号内的样式——修改body的背景颜色(background-color):
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}从上面的代码可以看出，媒体类型是屏幕（screen），使用 一个 and 连接后面的媒体功能，这里写的是 max-width:300px ，也就是说，当屏幕的最大宽度 小于等于 300px 的时候，就应用花括号里面的样式。
2、当文档宽度大于等于300px 的时候显示的样式
@media screen and (min-width: 300px){
body {
background-color:lightblue;
}
}注意，这里的媒体功能使用的是 min-width 而不是 max-width，我已经标红高亮显示出来了。
3、当文档宽度大于等于 300px 并且小于等于500px （ width >=300 && width <=500）的时候显示的样式
@media screen and (min-width:300px) and (max-width:500px) {
/* CSS 代码 */
}注意，这里使用了两个 and ，用来连接 两个媒体功能，一个用于限制最小，一个用于限制最大。
更多web前端开发知识，请查阅 HTML中文网 ！！
以上就是css如何设置不同分辨率下的样式？的详细内容，更多请关注易知道|edz.cc其它相关文章！
