您的位置: 首页  >  文章  >  Css 学习笔记 第十一章 相应式网页

Css 学习笔记 第十一章 相应式网页

分类: 文章 • 2023-03-23 12:53:37

                                                               相应式网页

响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。

  • viewport 视口

  • @media 媒体查询

  • 响应式图像的方法

  • 响应式的页面布局

 

viewport: 

         可以叫做视口 默认虚拟视口为  980 像素 宽  然后按照（3：1 或者 2：1）进行缩放，也就是说 当我们先加载一个页面的时候 会先以 980像素的标准加载网页，然后在缩小 490像素 。 这是一个全局的缩小也就是  所有元素都会缩小   最后 326像素

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  •     width                  :控制 viewport 的大小  可以指定的一个值  如果600， 或者特殊的值 
  •     initial-scale        :初始缩放比例  也式第一次Load 的时候缩放的比例，  值为：1.0
  •    maximum-scale  :允许用户 缩放的最大比例
  •    minimum-scale   :允许用户缩放到的最大比例
  •   user-scalable       :用户是否可以手动缩放

 

@media 媒体查询  的两种样式

  • 链接样式查询  
<link rel="stylesheet" media="(max-width:480px)" href="one.css">

 Css 学习笔记 第十一章 相应式网页Css 学习笔记 第十一章 相应式网页

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
		<title></title>
		<link rel="stylesheet" type="text/css" href="style/blue.css"/>
		<link rel="stylesheet" type="text/css" href="style/red.css" media="(max-width:480px)" />
	</head>
	<style>
 h1{
	border: 3px solid darkred; 
	 
 }
 
 
	</style>
	<body>

	 <h1>asd哦啊设计大赛就啊iOS加大送i就 </h1>

	</body>
</html>





red.css

body{
	background: darkred;
	
}
h1{
	color: yellowgreen;
}




blue.css
body{
	background: blue;	
}
h1{
	color: orange;
}

 

  • 直接在样式表中查询
@media(max-width480px){}

 横版：

  •  超小屏幕（手机，小于 768px）                                                                        @media(max-width:767px){...}
  • 小屏幕 （平板，大于等于768px）                                                                     @media(min-width:768px){...}
  • 中等屏幕（桌面显示器，大于等于992px）                                                        @media(min-width:992){...}
  • 大屏幕（大桌面显示器，大于等于1200px）                                                      @media(min-width:1200px){...} 

 

Css 学习笔记 第十一章 相应式网页

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
		<title></title>
	</head>
	<style>
 h1{
	border: 3px solid darkred; 	 
 }
 body
{
	background: orange;
} 
@media (max-width:767px) {
	body{
		background:lightgray;
	}
}
@media (min-width:768px) {
	body{
		background:azure;
	}
}
@media (min-width:992px) {
	body{
		background:green;
	}
}
@media (min-width:1200px) {
	body{
		background:palevioletred;
	}
}
	</style>
	<body>

	 <h1>asd哦啊设计大赛就啊iOS加大送i就 </h1>

	</body>
</html>

  •  media type 媒体类型

  1. screen 屏幕的设备， 比如电脑  平板 手机
  2. TV 电视媒体
  3. print  打印机
  4. projection 投影仪
  5. 如果不设置就是all  会应用在所有的媒体设备中

 

@media only screen and(min-width:992px){}

@media all and(min-width:992px){}

 

 

 

响应式图像的  两种方法：

  • 背景图片
@media (min-width:768px) {  background:url("image.jpg");}

Css 学习笔记 第十一章 相应式网页 Css 学习笔记 第十一章 相应式网页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
		<title></title>
	</head>
	<style>
/*    @media (min-width:768px) {
    	background:url("image.jpg");
    }
	 */
 *{
	 padding: 0;
	 margin: 0;
 }
 header,footer{
	 text-align: center;
	 font-size: 30px;
	 height: 100px;
	 line-height: 100px;
 }
.banner{
	background: url("img/picture1200.jpg") no-repeat center top;
	width: 100%;
	height: 449px;
	 
}

@media (max-width:767px) {
	.banner{
		background-image: url(img/picture768.jpg);
		height: :600px;
	}
}
@media (min-width:768px) {
	.banner{
		background-image: url(img/picture1200A.jpg);
		height: :600px;
	}
}
@media (min-width:1200px) {
	.banner{
		background-image: url(img/picture1200.jpg);
		height: :600px;
	}
}

	</style>
	<body>
	<header>头部区域</header>
	<div class="banner"></div>
    <footer>底部区域</footer>
	</body>
</html>

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
		<title></title>
	</head>
	<style>
/*    @media (min-width:768px) {
    	background:url("image.jpg");
    }
	 */

*{
	padding: 0;
	margin: 0;
}

.box{
	margin: 0 auto;
		width: 100%;
}
.box img{
	width: 100%;	
}

@media (min-width:1200px){
	.box{width: 1200px;}
}
	</style>
	<body>
 
	<div class="box">
		<img src="img/picture1200A.jpg" srcs>
	</div>
	</body>
</html>

 

  • 响应式图片
<picture>
<source media="(min-width:45em)" srcset="1.jpg">
<source media="(min-width:18em)" srcset="1.jpg">
<img src="默认.jpg" alt="">
<p>图片描述信息</p>
</picture>

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
		<title></title>
	</head>
	<style>
		/*    @media (min-width:768px) {
    	background:url("image.jpg");
    }
	 */
.box{
	margin: 0 auto;
		width: 100%;
}
.box img{
	width: 100%;	
}
@media (min-width:1200px){
	.box{width: 1200px;}  /* 固定宽度 */
}
	</style>
	<body>
		<div class="box">
			<picture>
				<source media="(min-width:1200px)" srcset="img/picture1200A.jpg" />
				<source media="(max-width:768px)" srcset="img/picture768.jpg">
				<img src="img/picture1200.jpg" alt="">
			</picture>
		</div>
	</body>
</html>

 

响应式布局 框架的搭建

Css 学习笔记 第十一章 相应式网页Css 学习笔记 第十一章 相应式网页

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
		<title>响应式框架</title>
	</head>
	<style>
		* {
			padding: 0;
			margin: 0;
		}

		.hd {
			width: 1000px;
			margin: 0px auto;
			background: #ccc;
			margin-bottom: 10px;
		}

		.hd:after {
			content: "";
			display: block;
			clear: both;
		}

		.hd .loge {
			width: 20%;
			height: 100px;
			background: #066;
			float: left;
		}

		.hd .nav {
			width: 70%;
			height: 100px;
			background: #6C0;
			float: right
		}

		.banner {
			width: 100%;
			height: 400px;
			background: #CC0;
			margin-bottom: 10px;
		}

		.pro {
			width: 1000px;
			margin: 0 auto;
			background: #CCC;
			margin-bottom: 10px;
		}

		.pro:after {
			content: "";
			display: block;
			clear: both;
		}

		.pro .box {
			width: 240px;
			height: 200px;
			background: #033;
			float: left;
			margin: 0 5px;
		}

		.news {
			width: 1000px;
			margin: 0 auto;
			background: #cf6;
			margin-bottom: 10px;
		}

		.news .video {
			width: 490px;
			height: 300px;
			background: #069;
			float: left;
		}

		.news:after {
			content: "";
			display: block;
			clear: both;
		}

		.news .list {
			width: 490px;
			height: 300px;
			background: #f60;
			float: right;
		}

		.ft {
			width: 100%;
			height: 100px;
			background: #000000;
		}

		@media (max-width:767px) {
			.hd {
				width: 100%;
			}

			.pro {
				width: 100%;
			}

			.pro .box {
				width: 49%;
				margin: 10px 0.5%;
			}

			.news {
				width: 100%;
				
			}

			.news .video {
				width: 100%;
				margin-bottom: 3px;
			}

			.news .list {
				width: 100%;
			}
		}

		@media (min-width:768px) {
			.hd {
				width: 100%;
			}

			.pro {
				width: 80%;
			}

			.pro .box {
				width: 49%;
				margin: 5px 0.5%;
			}

			.news {
				width: 100%;
			}

			.news .video {
				width: 49.5%;
			}

			.news .list {
				width: 49.5%;
			}
		}
		
		@media (min-width:1000px) {
						.hd {
				width: 1000px;
			}
			.pro{
				width: 1000px;
			}
			.pro .box{
				width:240px ;
				margin: 0 5px;
			}
			.news{
				width: 1000px;
		
			}
			.news .video{
				width: 495px;
			}
			.news .list{
				width: 495px;
			}
		}
		
		@media (min-width:1200xp) {
			
		}
		
		
	</style>
	<body>
		<header class="hd">
			<div class="loge"></div>
			<nav class="nav"></nav>
		</header>
		<div class="banner"></div>
		<div class="pro">
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
		</div>
		</div>
		<div class="news">
			<div class="video"></div>
			<div class="list"></div>
		</div>
		<footer class="ft"></footer>
	</body>
</html>

 

相关推荐