› 首页 ›期权学习›期权知识›正文

css3之@media

xiaojiucai 期权知识 2020-08-18 584 0

1、

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
<style type=text/css>
/*only screen 仅限于屏幕设备*/
/*min 小的*/

/*max最大，当宽度是800px以下的时候*/
@media only screen and (max-width: 800px){
	body{
		background: red;
	}
	h1{
		color: blue;
	}
}


/*最小宽度801，也就是说屏幕是801以上*/
/*@media only screen and (min-width: 801px){
	body{
		background: purple;
	}
	h1{
		color: yellow;
	}
}*/
/*801px到900px这个范围*/
@media only screen and (min-width: 801px) and (max-width: 1000px){
	body{
		background: purple;
	}
	h1{
		color: yellow;
	}
}
/*901px以上*/
@media only screen and (min-width: 1001px) {
	body{
		background: green;
	}
	h1{
		color: white;
	}
}
</style>
</head>
<body>
<h1>期权记，学好的</h1>
</body>
</html>

原文链接：https://www.qiquanji.com/post/7503.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

版权声明

本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。