08
2018
08

css3之@media

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

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

gzh

微信扫码关注

更新实时通知

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。