html页面根据屏幕大小用不同样式,css如何设置不同分辨率下的样式？

css如何设置不同分辨率下的样式？下面本篇文章给大家介绍一下CSS根据不同的分辨率显示不同样式的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

css如何设置不同分辨率下的样式？

在写响应式网页的时候，我们需要网页有几种显示方式，我们可以用CSS实现这个功能

使用CSS提供的媒体查询，我们可以根据屏幕分辨率来使用相应的CSS样式

@media 媒体查询

@media 媒体查询选择性加载css，意思是自动探测屏幕宽度，然后加载相应的CSS文件。可以针对不同的屏幕尺寸设置不同的样式，当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面，这对调试来说是一个极大的便利。

语法：@media mediaType and|not|only (media feature) {

/*CSS-Code;*/

}

媒体类型(mediaType )

类型有很多，在这里不一一列出来了，只列出了常用的几个。值描述

all用于所有设备

print用于打印机和打印预览

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中文网 ！！