CSS的@media语法实现页面端手机端的自适应

最新推荐文章于 2024-04-23 10:13:29 发布

xdnloveme

最新推荐文章于 2024-04-23 10:13:29 发布

阅读量1.8w

点赞数 2

分类专栏： CSS 文章标签： bootstrap html javascript css css3

本文链接：https://blog.csdn.net/xdnloveme/article/details/74995841

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在CSS3版本内有这么一个语法：

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

最近初学css，需要用到设备和电脑端各种页面自适应的情况。当然自然而然就会想到这一个属性：

@media，今天花了1小时左右做了一个自适应的小demo，记录下，如下图所示：

电脑端的显示图：

手机端的显示：

套用了bootstrap主页面的模板，且只用了@media语法（有media属性可以配置，但是我没用），这里用到大概就是bootstrap的栅格系统和@media。

代码块如下所示，直接复制粘贴即可运行。

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
<head>
	<title>自适应</title>
</head>
<body>
<div class="navbar">
	<div class="container">
		<div class="navbar-header"><a href="#">自适应demo</a>
		<button class="change" οnclick="change(this)"><span class="glyphicon glyphicon-align-justify"></span></button>
		</div>
		<div id="n1" class="navbar-collapse collapse">
			<ul class="nav navbar-nav">
				<li class="hidden-sm hidden-md"><a href="http://v2.bootcss.com/">Bootstrap2中文文档</a></li>
				<li><a href="#">自适应最左边</a></li>
				<li><a href="">自适应文档</a></li>
				<li><a href="">less教程</a></li>
				<li><a href="">自学</a></li>
			</ul>
			
		</div>
	</div>
	<div style="text-align: center;font-family:'幼圆'">
		<h1>自适应效果显示</h1>
	</div>
	<div class="container container-body">
		<div class="div_info col-sm-6 col-md-4 col-lg-3"><img width="100%" height="100%" src="http://www.th7.cn/d/file/p/2014/09/28/8543a9ac6d0ade866f7a2fa8f7b5f8b0.jpg"></div>
		<div class="div_info col-sm-6 col-md-4 col-lg-3"><img width="100%" height="100%" src="http://www.th7.cn/d/file/p/2014/09/28/8543a9ac6d0ade866f7a2fa8f7b5f8b0.jpg"></div>
		<div class="div_info col-sm-6 col-md-4 col-lg-3"><img width="100%" height="100%" src="http://www.th7.cn/d/file/p/2014/09/28/8543a9ac6d0ade866f7a2fa8f7b5f8b0.jpg"></div>
		<div class="div_info col-sm-6 col-md-4 col-lg-3"><img width="100%" height="100%" src="http://www.th7.cn/d/file/p/2014/09/28/8543a9ac6d0ade866f7a2fa8f7b5f8b0.jpg"></div>
		<div class="div_info col-sm-6 col-md-4 col-lg-3"><img width="100%" height="100%" src="http://www.th7.cn/d/file/p/2014/09/28/8543a9ac6d0ade866f7a2fa8f7b5f8b0.jpg"></div>
		<div class="div_info col-sm-6 col-md-4 col-lg-3"><img width="100%" height="100%" src="http://www.th7.cn/d/file/p/2014/09/28/8543a9ac6d0ade866f7a2fa8f7b5f8b0.jpg"></div>
		<div class="div_info col-sm-6 col-md-4 col-lg-3"><img width="100%" height="100%" src="http://www.th7.cn/d/file/p/2014/09/28/8543a9ac6d0ade866f7a2fa8f7b5f8b0.jpg"></div>
		<div class="div_info col-sm-6 col-md-4 col-lg-3"><img width="100%" height="100%" src="http://www.th7.cn/d/file/p/2014/09/28/8543a9ac6d0ade866f7a2fa8f7b5f8b0.jpg"></div>
	</div>
</div>
</body>
</html>

<script type="text/javascript">
	function change(obj){
		if($("#n1").hasClass("collapse in")){
			$("#n1").removeClass("collapse in");
			$("#n1").addClass("collapse");
		}else{
			$("#n1").removeClass("collapse");
			$("#n1").addClass("collapse in");
		}
	}
</script>
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style type="text/css">
	@media (max-width: 768px){
		.change{
			height: 100%;
 			float: right;
 			margin: 15px;
 		}
	}
	@media (min-width: 768px){
		.change{
 		display: none;
 		}
	}
 	</style>
<style type="text/css">
 	
	.container{
		background-color: #2e2e2e;
	}
	.container-body{
		background-color: white;
	}
	.navbar-header > a{
		margin: 15px;
		font-size: 20px;
		text-align: center;
	}
	a{
		color: #ccc;
	}
	.nav>li>a:hover{
		background-color: #2e2e2e;
		color: white;
	}
	.navbar-collapse > ul >li{
		
	}
	.navbar-header > a{
		float:left;
	}
	.navbar-header > a:hover{
		text-decoration:none;
		background-color: #2e2e2e;
	}
	.div_info{
		height: auto;
		padding: 15px; 
	}
	.btn-type{
		font-size: 24px;
	}
</style>

可以看到根据屏幕尺寸的变化，上面导航栏也随之出现变化，最后导航栏的所有条目都进入到一个右上角的按钮中去了。

这个demo很简单，只是拿来记录一下自己第一个自适应demo

主要注意的语法是：

1、@media （max-width : 768 px）{

CSS code；

}

//

“max-width 极限宽度：768px”主要表示在此控件宽度小于768px才执行下列CSS code代码块，否则就照原本已存在CSS代码执行。

“min-width 最小宽度： 768px”主要表示在此控件宽度在大于768px才执行下列CSS code块。

2、
col-sm-6 col-md-4 col-lg-3
主要代表了bootstrap栅格系统，分别是对应不同小，中，大屏幕不同的栅格分布（横行别分是2个，4个，3个，最小为1个）

以上均为博主自我整理片段，为初学2017.7.11记录。

xdnloveme

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
CSS的@media语法实现页面端手机端的自适应

在CSS3版本内有这么一个语法：@media mediatype and|not|only (media feature) { CSS-Code;} 最近初学css，需要用到设备和电脑端各种页面自适应的情况。当然自然而然就会想到这一个属性：@media，今天花了1小时左右做了一个自适应的小demo，如下图所示：电脑端的显示图：
复制链接

扫一扫