Home >Web Front-end >Front-end Q&A >How to set css styles for different resolutions

How to set css styles for different resolutions

青灯夜游Original: 2021-09-13 17:41:435094browse

In css, you can use the "@media" rule to set styles for different resolutions according to different screen sizes. The syntax is "@media mediatype and|not|only (media feature){css style}" .

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In css, you can use the "@media" rule to set styles for different resolutions.

Using the @media query, you can define different styles for different media types. The syntax of @media query:

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

Example:

/* 设置了浏览器宽度小于1600px时的样式 */ 
@media screen and (max-width: 1600px) {
    .select2-container{
        width:328px !important;
    }
    #address{
        width:calc(37% - 3px) !important;
    }
}
/* 设置了浏览器宽度小于1367px时的样式 */ 
@media screen and (max-width: 1367px) {
    .select2-container{
        width:275px !important;
    }
    #address{
        width:calc(36% + 3px) !important;
    }
}

It can be seen that @media can set different styles for different screen sizes, especially if you need to set up a responsive page. ,@media is very useful. When you reset the browser size, the page will also be re-rendered based on the browser's width and height.

Example:

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>无标题文档</title>
		<style>
			.abc {
				height: 300px;
				border: 1px solid #000;
				margin: 0 auto
			} //可以去掉边框
			@media screen and (min-width: 1201px) {
				.abc {
					width: 1200px
				}
			}
			/* css 注释说明：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
			
			@media screen and (max-width: 1200px) {
				.abc {
					width: 900px
				}
			}
			/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
			
			@media screen and (max-width: 900px) {
				.abc {
					width: 200px;
				}
			}
			/* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */
			
			@media screen and (max-width: 500px) {
				.abc {
					width: 100px;
				}
			}
			/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
		</style>
		<!--[if lt IE 9]> 
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
<![endif]-->
	</head>

	<body>
		<div class="abc">DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div>
	</body>

</html>

(Learning video sharing: css video tutorial)

The above is the detailed content of How to set css styles for different resolutions. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to disable page enlargement in html5Next article：How to disable page enlargement in html5

See more

How to set css styles for different resolutions

Related articles