@media媒体查询响应式的使用

  • 作者:村长
  • 发布时间:2020-04-18 10:56
  • 分类:HTML+CSS
  • 标签: @media的具体使用方法

@media媒体查询标签可以实现在不同的屏幕分辨率下,显示不同的样式。


1、@media标签有两种使用方法

(1)直接用@media标签在css中写:

        <style>
		*{
			margin:0;
			padding: 0;
		}
		li{
			list-style: none;
			float: left;
			padding:10px;
		}
		ul{
			overflow: hidden;
		}
		a{
			text-decoration: none;
		}
		/*超过1024px时,可以使用的样式*/
		@media all and (min-width:1024px){
			.topBox{
				background: green;
			}
		}
		/*适合普通分辨率桌面浏览器和横屏*/
		@media all and (max-width:1024px){
			.topBox{
				background: red;
			}
		}
		/*适合低分辨率桌面浏览器和竖屏 ipad*/
		@media all and (max-width: 768px){
			.topBox{
				background: yellow;
			}
		}
		/*适合横屏 iphone/android*/
		@media all and (max-width:480px){
			.topBox{
				background: black;
			}
		}
		/*适合竖屏 iphone/Android*/
		@media all and (max-width: 380px){
			.topBox{
				background: orange;
			}
		}
	</style>

(2)直接使用link引用css样式表,根据不同的分辨率使用对应的样式表样式

	<!-- 除了上面的用法外,也可以痛过不同的屏幕分辨率加载不同的CSS文件 -->
	<!-- 适合普通分辨率桌面浏览器和横屏 -->
	<link rel="stylesheet" href="./css/pc.css" media="all and (max-width:1024px)">
	<!-- 适合低分辨率桌面浏览器和竖屏 ipad -->
	<link rel="stylesheet" href="./css/ipad.css" media="all and (max-width: 768px)">
	<!-- 适合横屏 iphone/android -->
	<link rel="stylesheet" href="./css/phone.css" media="all and (max-width:480px)">
	<!-- 适合竖屏 iphone/Android -->
	<link rel="stylesheet" href="./css/phones.css" media="all and (max-width: 380px)">

2、实现效果:

当屏幕可视区的宽度大于1024px时:

image.png

当屏幕可视区的宽度小于1024px时:

image.png

当屏幕可视区的宽度小于768px时:

image.png

当屏幕可视区的宽度小于480px时:

image.png

当屏幕可视区的宽度小于380px时:

image.png

  • php程序员面试笔试宝典
琉忆编程库
加载中...
TOP