admin管理员组

文章数量:1532013

一、响应式开发原理

1.1 响应式开发原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。

设备的划分情况：

+ 小于768的为超小屏幕（手机）
+ 768~992之间的为小屏设备（平板）
+ 992~1200的中等屏幕（桌面显示器）
+ 大于1200的宽屏设备（大桌面显示器）

1.2 响应式布局容器

响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

父容器版心的尺寸划分

+ 超小屏幕（手机，小于 768px）：设置宽度为 100%
+ 小屏幕（平板，大于等于 768px）：设置宽度为 750px
+ 中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
+ 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px

但是我们也可以根据实际情况自己定义划分

二、怎样使用media

Media所有参数汇总 
width:浏览器可视宽度。 
height:浏览器可视高度。 
device-width:设备屏幕的宽度。 
device-height:设备屏幕的高度。 
orientation:检测设备目前处于横向还是纵向状态。(landscape/portrait) 
aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9) 
device-aspect-ratio:检测设备的宽度和高度的比例。 
color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色，向所有能显示颜色的设备应 用样式表） 
color-index:检查设备颜色索引表中的颜色，他的值不能是负数。 
monochrome:检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到） 
resolution:检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。 
grid:检测输出的设备是网格的还是位图设备，如果设备是基于网格的（例如电传打字机终端或只能显示一 种字形的电话），该值为1，否则为0

1)首先需要在html文档中添加以下代码，用来兼容移动设备的显示效果

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, 
maximum-scale=1.0, user-scalable=no"> 是否允许屏幕缩放

    width=device-width:宽度等于当前设备的宽度 
    initial-scale=1：初始的缩放比例（默认为1） 
    maximum-scale=1：允许用户缩放到得最大比例（默认为1） 
    user-scalable=no：用户不能手动缩放

2)怎样在CSS文件中写CSS响应式媒体查询

例: 
@media screen and (max-width:720px) and (min-width:320px){ body{ background-color:red; } }
@media screen and (max-width:320px){ body{ background-color:blue; } }

三、响应式设计

四、最终实现效果




五、具体实现（代码）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		<!-- 头部 -->
		<div class="header">
			<div class="header-main">
				<广告>
			</div>
		</div>
		<!-- 导航 -->
		<div class="nav">
			<div class="nav-main">
				<a href="" class="logo"></a>
				<a href="" class="nav-item">Mac</a>
				<a href="" class="nav-item">iPad</a>
				<a href="" class="nav-item">iPhone</a>
				<a href="" class="nav-item">Watch</a>
				<a href="" class="nav-item">Music</a>
				<a href="" class="nav-item">技术支持</a>
				<div class="search"></div>
				<div class="shop-bag"></div>
			</div>
			<div class="nav-mobile">
				<input type="checkbox" name="" id="menu-check" value="" style="display: none;"/>
				<label href="" class="mobile-list" for="menu-check">
					<div class="line"></div>
					<div class="line"></div>
				</label>
				<a href="" class="logo"></a>
				<a href="" class="shop-bag"></a>
				<div class="menu">
					<div class="searchInput">
						<span class="icon"></span>
						<span type="" name="" id="" value="" class="input" />搜索 apple</span>
					</div>
					<div class="menulist">
						<a href="" class="menu-item">Mac</a>
						<a href="" class="menu-item">iPad</a>
						<a href="" class="menu-item">iPhone</a>
						<a href="" class="menu-item">Watch</a>
						<a href="" class="menu-item">Music</a>
						<a href="" class="menu-item">技术支持</a>
					</div>
				</div>
			</div>
		</div>
		<!-- 广告 -->
		<div class="ad">
			<div class="buylink"><a href="https://www.apple/shop">在线选购</a></div>
			<div class="ad-text">，享受免费送货、Specialist 专家支持、免息分期等服务。</div>
		</div>
		<!-- 推荐产品 -->
		<div class="goods" id="iPhone12">
			<div class="goods-name">iPhone 12</div>
			<div class="goods-advantage">升维大提速</div>
			<div class="price-introduction">
				<div>RMB 229/月或 RMB 5499 起，</div>
				<div class="introduce">还可折抵换购<span class="shangbiao">1</span></div>
			</div>
			<div class="buy-link">
				<a class="buy-link-text" href="https://www.apple/iphone-12/">进一步了解</a>
				<a href="https://www.apple/iphone-12/">
					<div class="jiantou"></div>
				</a>
				<a class="buy-link-text" href="https://www.apple/shop/buy-iphone/iphone-12">购买</a>
				<a href="https://www.apple/shop/buy-iphone/iphone-12">
					<div class="jiantou"></div>
				</a>
			</div>
		</div>
		<div class="goods" id="iphone12-pro">
			<div class="goods-name">iPhone 12</div>
			<div class="goods-advantage">升维大提速</div>
			<div class="price-introduction">
				<div>RMB 229/月或 RMB 5499 起，</div>
				<div class="introduce">还可折抵换购<span class="shangbiao">1</span></div>
			</div>
			<div class="buy-link">
				<a class="buy-link-text" href="https://www.apple/iphone-12/">进一步了解</a>
				<a href="https://www.apple/iphone-12/">
					<div class="jiantou"></div>
				</a>
				<a class="buy-link-text" href="https://www.apple/shop/buy-iphone/iphone-12">购买</a>
				<a href="https://www.apple/shop/buy-iphone/iphone-12">
					<div class="jiantou"></div>
				</a>
			</div>
		</div>
		<div class="goods" id="hero_ipad_pro">
			<div class="goods-name">iPhone 12</div>
			<div class="goods-advantage">由Apple M1 芯片强势驱动</div>
			<div class="buy-link">
				<a class="buy-link-text" href="https://www.apple/iphone-12/">进一步了解</a>
				<a href="https://www.apple/iphone-12/">
					<div class="jiantou"></div>
				</a>
				<a class="buy-link-text" href="https://www.apple/shop/buy-iphone/iphone-12">购买</a>
				<a href="https://www.apple/shop/buy-iphone/iphone-12">
					<div class="jiantou"></div>
				</a>
			</div>
		</div>
		<!-- 产品分类 -->
		<div class="goods-classify">
			<div class="classify-content">
				<div class="classify-item" id="promo_imac">
					<div class="classify-item-title"></div>
					<div class="classify-item-content"></div>
					<div class="classify-item-link"></div>
				</div>
			</div>
			<div class="classify-content">
				<div class="classify-item" id="promo_watch">
					<div class="classify-item-title"></div>
					<div class="classify-item-content"></div>
					<div class="classify-item-link"></div>
				</div>
			</div>
			<div class="classify-content">
				<div class="classify-item" id="promo_spatial">
					<div class="classify-item-title"></div>
					<div class="classify-item-content"></div>
					<div class="classify-item-link"></div>
				</div>
			</div>
			<div class="classify-content">
				<div class="classify-item" id="promo_airtag">
					<div class="classify-item-title"></div>
					<div class="classify-item-content"></div>
					<div class="classify-item-link"></div>
				</div>
			</div>
			<div class="classify-content">
				<div class="classify-item" id="tile_ios15">
					<div class="classify-item-title"></div>
					<div class="classify-item-content"></div>
					<div class="classify-item-link"></div>
				</div>
			</div>
			<div class="classify-content">
				<div class="classify-item" id="promo_ipados">
					<div class="classify-item-title"></div>
					<div class="classify-item-content"></div>
					<div class="classify-item-link"></div>
				</div>
			</div>
		</div>
	</body>
</html>


*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body{
	font-family: "SF Pro SC","HanHei SC","SF Pro Text","Myriad Set Pro","SF Pro Icons","PingFang SC",
	"Helvetica Neue","Helvetica","Arial",sans-serif;
	padding-top: 84px;
}

/* 头部 */
.header{
	min-width: 330px;
	width: 100%;
	background-color: #444444;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
}
.header-main{
	width: 100%;
	max-width: 976px;
	height: 40px;
	margin: 0 auto;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	font-size: 12px;
	color: #a8a8aa;
}

/* 导航栏 */
.nav{
	width: 100%;
	background-color: rgba(0,0,0,0.92);
	position: fixed;
	top: 40px;
	left: 0;
	z-index: 10;
}

.nav-main{
	width: 100%;
	max-width: 1000px;
	height: 44px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.nav-main a{
	color: #f5f5f7;
	font-size: 14px;
	font-weight: 100;
	text-decoration: none;
	opacity: 0.8;
}
.nav-main a:hover{
	opacity: 1;
	color: #FFFFFF;
}
.logo{
	width: 44px;
	height: 44px;
	background-image: url(../../image/apple/apple-image.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;	
	opacity: 0.8;
	z-index: 10;
}
.logo:hover{
	opacity: 1;
}
.search{
	width: 18px;
	height: 44px;
	background-image: url(../../image/apple/search-image.svg);
	background-position: top;
	background-repeat: no-repeat;
	background-size: 18px auto;
	background-position: 0px -44px;
}
.search:hover{
	background-size: 18px auto;
	background-position: 0px 0px;
}
.shop-bag{
	width: 44px;
	height: 44px;
	background-image: url(../../image/apple/bag_image.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.8;
}
.shop-bag:hover{
	opacity: 1;
}
/* 手机导航 */
.nav-mobile{
	min-width: 330px;
	width: 100%;
	height: 44px;
	display: none;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;

}
.mobile-list{
	width: 44px;
	height: 44px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 10;
}
.mobile-list .line{
	width: 15px;
	height: 1px;
	background-color: #FFFFFF; 
	opacity: 0.6;
	transition: all 0.5s;
}
.mobile-list:hover .line{
	opacity: 1;
}
#menu-check:checked~.mobile-list .line:first-child{
	transform: rotate(45deg) translateY(5px);
}
#menu-check:checked~.mobile-list .line:last-child{
	transform: rotate(-45deg) translateY(-4px);
}
#menu-check:checked~.shop-bag{
	background: none;
}
.mobile-list .line:first-child{
	margin-bottom: 5px;
}


.menu{
	min-width: 330px;
	width: 100vw;
	height: 0vh;
	position: fixed;
	left: 0;
	top: 40px;
	background-color: #000000;
	padding: 48px 10px;
	display: none;
	flex-direction: column;
	align-items: center;
	overflow: hidden; 
}
.searchInput{
	max-width: 580px;
	width: 100%;
	height: 34px;
	border-radius: 8px;
	background-color: rgba(110, 110, 115,0.3);
	padding: 0 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.searchInput .icon{
	width: 30px;
	height: 36px;
	background-image: url(../../image/apple/search-image.svg);
	background-position: top;
	background-repeat: no-repeat;
	background-size: 18px auto;
	background-position: 0px -44px;
	margin-top: -7px;
}
.searchInput .input{
	display: inline-block;
	height: 30px;
	background-color: transparent;
	border: none;
	flex: 1;
	font-size: 17px;
	color: rgb(110, 110, 115);
	line-height: 30px;
}
.menulist{
	max-width: 580px;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 60px;
	position: relative;
}
.menulist::before{
	position: absolute;
	content: "快速链接";
	left: 0;
	top: 30px;
	color: #FFFFFF;
	font-size: 12px;
	opacity: 0.4;
}
.menulist a{
	text-decoration: none;
}
.menu-item{
	width: 100%;
	height: 44px;
	padding: 13px 0;
	font-size: 17px;
	color: #FFFFFF;
	font-weight: 400;
	opacity: 0.8;
	border-bottom: 1px solid #424245;
}
.menu-item:last-child{
	border-bottom: none;
}

#menu-check:checked~.menu{
	display: flex;
	/* 动画名:swiperdown,时间:0.6s,执行1次,停留在最后效果 */
	animation: swiperdown 0.6s 1 forwards;
}
@keyframes swiperdown{
	from{
		height: 0;
	}
	to{
		height: 100vh;
	}
}

/* 广告 */
.ad{
	min-width: 330px;
	width: 100%;
	height: 44px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	background-color: #00008B;
	font-size: 12px;
	background-color: rgb(245, 245, 247);
}
.buylink a{
	text-decoration: none;
	color: rgb(0, 102, 204);
}
.buylink:hover{
	text-decoration: underline;
}
.ad-text{
	color: rgb(29, 29, 31);
}

/* 商品 */
.goods{
	min-width: 330px;
	width: 100%;
	height: 580px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #fbfbfd;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 10px;
}
.goods-name{
	font-size: 53px;
	font-weight: bold;
	margin-top: 50px;
}
.goods-advantage{
	margin-top: 6px;
	font-size: 25px;
}
.price-introduction{
	font-size: 16px;
	margin-top: 15px;
	opacity: 0.6;
	text-align: center;
}
.introduce{
	margin-left: calc(50% - 60px);
	width: 120px;
	margin-top: 3px;
}
.shangbiao{
	font-size: 8px;
	float: right;
	top: 0;
	left: 0;
}
.buy-link{
	padding: 5px;
	width: 220px;
	margin-top: 20px;
	display: flex;
	font-size: 20px;
	justify-content: space-between;
}
.buy-link a{
	font-size: 18px;
	text-decoration: none;
	color: #0066cc;
}
.buy-link .buy-link-text:hover{
	text-decoration: underline;
}
.jiantou{
	width: 10px;
	height: 10px;
	transform:  translateX(-15px) translateY(8px) rotate(45deg);
	border-top: 2px solid #0066cc;
	border-right: 2px solid #0066cc;
}
#iPhone12{
	background-image: url(../../image/apple/iphone_12.jpg);
}
#iphone12-pro{
	background-image: url(../../image/apple/iphone_12_pro.jpg);
	background-color: #000000;
	color: #FFFFFF;
}
#hero_ipad_pro{
	background-image: url(../../image/apple/hero_ipad_pro.jpg);
	background-color: #000000;
	color: #FFFFFF;
}

@media all and (max-width:760px){
	.nav-mobile{
		display: flex;
	}
	.nav-main{
		display: none;
	}
	.goods-name{
		font-size: 33px;
		font-weight: bold;
	}
	.goods-advantage{
		font-size: 16px;
	}
	.price-introduction{
		font-size: 12px;
	}
	.introduce{
		margin-left: calc(50% - 50px);
	}
	.shangbiao{
		font-size: 5px;
		padding-right: calc(50% - 25px);
	}
	.buy-link{
		width: 160px;
		margin-top: 10px;
	}
	.buy-link a{
		font-size: 14px;
	}
	.jiantou{
		width: 8px;
		height: 8px;
		transform:  translateX(-8px) translateY(6px) rotate(45deg);
		border-top: 1.5px solid #0066cc;
		border-right: 1.5px solid #0066cc;
	}
	#iPhone12{
		height: 500px;
		background-image: url(../../image/apple/iphone_12_2.jpg);
	}
	#iphone12-pro{
		height: 500px;
		background-image: url(../../image/apple/iphone_12_pro2.jpg);
		background-color: #000000;
		color: #FFFFFF;
	}
	#hero_ipad_pro{
		height: 500px;
		background-image: url(../../image/apple/hero_ipad_pro2.jpg);
		
	}
}
/* 产品分类 */
.goods-classify{
	min-width: 330px;
	width: 100%;
	display: flex;
	/* justify-content: space-evenly; */
	flex-wrap: wrap;
	overflow: hidden;
}
.classify-content{
	width: 50%;
	padding: 0 10px;
	margin-bottom: 10px;
}
.classify-item{
	width: 100%;
	height: 580px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
} 

#promo_imac{
	background-image: url(../../image/apple/promo_imac.jpg);
}
#promo_watch{
	background-image: url(../../image/apple/promo_watch.jpg);
}
#promo_spatial{
	background-image: url(../../image/apple/promo_spatial.jpg);
}
#promo_airtag{
	background-image: url(../../image/apple/promo_airtag.jpg);
}
#tile_ios15{
	background-image: url(../../image/apple/tile_ios15.jpg);
}
#promo_ipados{
	background-image: url(../../image/apple/promo_ipados.jpg);
}


@media all and (max-width:1050px) {
	.goods{
		height: 650px;
	}
	#promo_imac{
		background-image: url(../../image/apple/promo_imac2.jpg);
	}
	#promo_watch{
		background-image: url(../../image/apple/promo_watch2.jpg);
	}
}
@media all and (max-width:645px) {
	.classify-content{
		width: 100%;
	}
}

本文标签： 官网苹果代码

版权声明：本文标题：仿苹果响应式官网（含代码！） 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1725930165a1049725.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。