前端布局 html+css十分钟实现前端响应式布局页面！

最近好乐
1,832 阅读11分钟

今天小编要给大家分享的内容是响应式布局页面设计，那么首先咱们就先来了解一个这个词，啥叫响应式布局呢？ 通俗的说就是这个页面的布局会随着不同的设备而变化，不同的设备展示不同的布局，以免更方便咱们的用户浏览页面。

Snipaste_2024-04-23_16-41-13.png

1 什么是响应式布局？

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。在移动互联网高度发达的今天，我们在桌面浏览器上开发的网页已经无法满足在移动设备上查看的需求。传统的开发方式是PC端开发一套页面，手机端再开发一套页面。但是这样做非常麻烦，随着不同的终端越来越多，你需要开发多个不同版本的页面。而使用响应式布局只要开发一套就够了。简而言之，就是一个网站能够兼容多个终端。

响应式开发与移动端与PC端分别开发的区别：响应式开发只编写一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。移动端与PC端分别开发，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机， 从而请求服务器，返回不同的页面。

2 响应式开发的原理？

响应式开发的原理是使用CSS3中的Media Query（媒体查询）针对不同宽度的设备设置不同的布局和样式，从而适配不同的设备。

CSS3 @media 查询定义和使用:

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

例如屏幕宽度小于 300 像素则修改背景颜色(background-color)为红色。

@media screen and (max-width: 300px) {
    body {
        background-color: red;
    }
}

设备的划分情况为：

  • 小于768的为超小屏幕（手机）
  • 768~992之间的为小屏设备（平板）
  • 992~1200的中等屏幕（桌面显示器）
  • 大于1200的宽屏设备（大桌面显示器）
    但是我们也可以根据实际情况自己定义划分情况。

接下来小编就带大家做一个简单的购物响应式布局页面：

Snipaste_2024-04-23_17-07-20.png

html部分：

  1. meta标签:
html复制代码
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

这个meta标签用于控制视口（viewport）的行为。其中：

  • width=device-width 表示页面的宽度应等于设备的屏幕宽度。
  • minimum-scale=1.0 和 maximum-scale=1.0 限制了用户缩放页面的范围，即用户不能缩放页面。
  • user-scalable=no 表示禁止用户手动缩放页面。
<head>
		<meta charset="utf-8">
		<title>响应式布局界面</title>
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />


<body>
		<div Id="container">
			<div class="navigation">
				<ul>
					<li><a href="">首页</a></li>
					<li><a href="">逛~</a></li>
					<li><a href="">消息</a></li>
					<li><a href="">购物车</a></li>
					<li><a href="">我的</a></li>
				</ul>
			</div>
			<div class="top">
				<div class="innerbox">
					<div class="classfication" style="font-size: 30px" >买手机，上京东，京东好货你值得拥有</div>
					<div class="content0">vivo x100</div>
					<div class="classfication0">性能方面，vivo X100 系列全球首发搭载 vivo 和联发科联合研发的天玑 9300 移动平台，采用全大核 CPU，12 核旗舰 GPU，还有内置生成式 AI 引擎的 APU790。此外，X100 系列还全球首发 LPDDR5T，速率高达 9.6Gbps。官方称，vivo X100 安兔兔 V10 综合跑分（实验室环境）224 万分。
						vivo X100 系列首发 vivo 自研蓝海电池，标准版搭载等效 5000mAh 容量电池，连续听歌最高达 105 小时，待机最长达 10 天；支持 120W 双芯闪充，最快 11 分钟充至 50%；支持零电极速启动，手机没电时最快只需 4 秒便可从关机到亮 logo。</div>
					<div class="content1">小米14</div>
					<div class="classfication1">小米14系列采用了高通公司新三代骁龙8系移动处理器平台[4]，并配备了小米与华星光电联合研发的新一代OLED屏幕以及与豪威科技、索尼电子联合研发的新一代影像系统，同时也是首个搭载小米澎湃OS的智能手机系列。在发布后，小米14系列得到国内外多数正面评价，并因此一定程度上推高了小米集团的股价，一度累计增长了18.4%。</div>
					<div class="content2">华为 mate 60</div>
					<div class="classfication2">HUAWEI Mate 60 采用同心设计，融合大地色卡，搭载 1-120 Hz LTPO 自适应刷新率屏幕。. 灵犀通信、方舟引擎、超大电池和华为超级快充，强强联合，性能强劲。. 超可靠玄武架构，融合超耐摔第二代昆仑玻璃、超坚韧玄武机身和超耐用锦纤材质，提供防跌抗摔耐水</div>
					<div class="content3">Apple 苹果iPhone 15</div>
					<div class="classfication3">iPhone 15采用了苹果一贯的简洁设计风格，机身材质为轻薄的航空级铝合金，既保证了强度，又减轻了重量。手机正面的设计延续了苹果的经典设计，采用了刘海全面屏，拥有圆润的边框和曲面的屏幕，整体外观极具科技感。iPhone 15搭载了全新的A16 Bionic芯片，这是一款基于5纳米工艺制程的移动端芯片。它集成了高性能的CPU和GPU，以及强大的神经网络引擎，为手机提供了出色的性能和能效。根据苹果官方数据，A16 Bionic芯片在CPU性能上比A14芯片提升了40%，在GPU性能上提升了30%。
					</div>

				</div>
			</div>
			<div class="bottom">
				<div class="innerbox">
					<div class="backetball">
						<img src="img/basketball.png" alt="" />
					</div>
					<div class="cxk">
						<img src="img/cxk.gif" alt="" />
					</div>
					<div class="inner2box">
						<p style="font-size: 30px; color: red;">喜欢就赶紧下单购买吧！小伙伴们！</p>
					</div>
				</div>
			</div>
		</div>
	</body>

css部分：

align-items: center; 是一个CSS样式属性，用于在Flexbox布局或Grid布局中控制子元素在交叉轴（cross axis）上的对齐方式。简单来说就是垂直居中的意思。

css复制代码
	.content0:hover, .content1:hover, .content2:hover, .content3:hover

这部分代码选择了四个具有不同类名的元素（.content0 到 .content3），并且只针对这些元素在鼠标悬停（:hover）时的状态进行样式设置。

  width: 40%
	当鼠标悬停在这些元素上时，它们的宽度将被设置为容器宽度的40%。     
	background-color: aquamarine;`  
	背景颜色将被设置为“aquamarine”。  
  
	background-image: url(img/bg2.gif) left bottom no-repeat;`  
	设置背景图像为`img/bg2.gif`。图像将定位在元素的左下角（`left bottom`），并且不会重复（`no-repeat`）。  

	transition: background-color 0.4s ease, width 0.3s ease;
  为`background-color`和`width`两个属性设置了过渡效果。当这两个属性发生变化时，它们将在0.4秒（背景颜色）和0.3秒（宽度）内平滑地过渡，过渡的速度曲线是“ease”（先慢后快再慢）。

总的来说，当你将鼠标悬停在具有.content0、.content1、.content2或.content3类名的元素上时，这些元素的宽度将变为40%，背景颜色将变为水绿色，背景图像将变为img/bg2.gif，并且这些变化将在指定的时间内平滑过渡。
效果如下：

Snipaste_2024-04-23_17-08-36.png

那么手机端页面是如何实现的呢？

	@media only screen and (max-width: 400px) {

这里定义了一个媒体查询，它表示当以下条件满足时，里面的样式将被应用：

  • only screen：仅应用于屏幕设备（例如电脑显示器、手机、平板等）。
  • max-width: 400px：视口（viewport）的最大宽度为400像素。

简而言之，当屏幕或视口的宽度小于或等于400像素时，里面的样式将被应用。在手机端显示时，左边导航栏则变为蓝色，且布局相应改变。

Snipaste_2024-04-23_17-07-40.png

  • #container：
	#container {  
	    width: 400px;  
	    font-size: 12px;  
	}

这部里定义了ID为container的元素的样式。即使视口宽度小于400px，这个元素的宽度也会被设置为400px。同时，该元素的字体大小被设置为12像素。

*{
	margin:0px auto;
	padding:0px;
	text-decoration: none;
}
a{
	display: flex;
	align-items: center;/* 垂直居中 */
	/*水平居中靠的是两个相同数值的padding */
	height:100%;
	padding-right: 21px;
}
html,body{
	background-color: aliceblue;
	position: relative;
	height:100%;
}
#container{
	width:1000px;
	height:100%;
	background-color: lavenderblush;
	display:flex;/* 弹性布局 */
	flex-direction: column;/* 定义主轴方向 */
	align-items: center;/* 垂直居中 */
	justify-content: center;/* 水平居中 */
}

.navigation{
	width:100%;
	height:46px;
	background-color: aquamarine;
	background: url(img/bg2.gif) left bottom;
}
.navigation ul{
	width: 100%;
	list-style-type: none;/* 去除小圆点 */
}
.navigation ul li{
	float:left;
	height:46px;
	padding-left:21px;/* 保证左边的图片能够显示 */
}
.navigation ul li:hover{
	background-color: pink;
	background: url(img/left2.gif) no-repeat;
}
.navigation ul li:hover a{
	background: url(img/right2.gif) right top no-repeat;
	color:white;
}
.top,.bottom{
	width: 100%;
	position: relative;
}
.top{
	background-color: ghostwhite;
	flex-grow:3;
	margin-top: 2%;
}
.bottom{
	background-color: honeydew;
	flex-grow:1;
}	
.innerbox{
	width:90%;
	height:90%;
	position: relative;
}
.inner2box{
	width:80%;
	height:80%;
	position: relative;
	/* background-color: tomato; */
}
.content0,.content1,.content2,.content3{
	width:30%;
	height:25%;
	background-color: rgb(224, 145, 89);
	margin-left: 0px;
	transition: background-color 0.4s ease,width 0.3s ease;
	display:flex;
	align-items: center;/* 垂直居中 */
	justify-content: center;
}
.content0:hover,.content1:hover,.content2:hover,.content3:hover{
	width:40%;
	background-color: aquamarine;
	background-image: url(img/bg2.gif) left bottom no-repeat;
	transition: background-color 0.4s ease,width 0.3s ease;
}






.classfication,.classfication0,.classfication1,.classfication2,.classfication3{
	width:60%;
	height:100%;
	margin-right: 0px;
	background-color: rgb(239, 62, 79);
	position: absolute;
	top:0px;
	right: 0px;
	display:flex;
	align-items: center;/* 垂直居中 */
	justify-content: center;
}
.classfication0,.classfication1,.classfication2,.classfication3{
	opacity: 0;
	size: 1px;
}

.content0:hover + .classfication0, .content1:hover + .classfication1, .content2:hover + .classfication2, .content3:hover + .classfication3{
	opacity: 1;
	background-color: aquamarine;
	/* 必须是同胞元素才能这样使用(即两个元素直接必须相邻) +是指相邻兄弟选择器*/
}


@media only screen and (max-width: 400px) {/* 当宽度小于400px时显示为手机端界面 */
#container{
	width:400px;
	font-size: 12px;
}
.content0,.content1,.content2,.content3{
	background-color: rgb(99, 141, 219);
}
}


@keyframes rotate {
	  from{
	    transform: rotate(0deg)/* 初始角度 */ 
	  }
	  
	  to{
	    transform: rotate(360deg)/* 旋转后的角度 */ 
	  }
}
.backetball{
	width:20px;
	height:20px;
	animation: rotate 1.5s linear infinite; /* 持续时间为3秒，线性速度，无限循环 */
	float:left;
}
.cxk{
	width:20px;
	height:20px;
	float: right;
}
.backetball img,.cxk img{
	width: 100%;
	height: 100%;
}

js部分：

  1. 加载时调整网页宽度：
javascript
	window.onload = function() {  
	    resetPage();  
	}

当整个页面及其所有依赖资源（如图像、样式表和脚本）都已完成加载时，resetPage() 函数会被调用。

2. 浏览器被重置大小时调整网页宽度：

javascript
	window.onresize = function() {  
	    resetPage();  
	}

当用户调整浏览器窗口的大小时，resetPage() 函数也会被调用。

3. resetPage 函数：

javascript
	function resetPage() {  
	    var deviceWidth = document.documentElement.clientWidth;  
	    var Maxwidth = 1500;  
	    var Minwidth = 400;  
	    originWidth = document.getElementById('container');  
	    scale = Math.max(Math.min(deviceWidth / originWidth.clientWidth, Maxwidth / 
            deviceWidth), Minwidth / deviceWidth);  
	    document.body.style.zoom = scale;  
	}
  • deviceWidth：获取浏览器窗口的宽度。
  • Maxwidth 和 Minwidth：分别定义了最大和最小的缩放比例限制，即缩放后的宽度不应超过1500像素，也不应小于400像素。
  • originWidth：获取ID为container的元素的宽度。注意，这里有一个潜在的问题：originWidth应该是一个变量，但在声明时缺少了var关键字，这可能会导致它在全局作用域中成为一个未声明的变量。
  • scale：计算缩放比例。首先，它计算deviceWidth与originWidth的比值，这给出了一个基本的缩放比例。然后，它使用Math.min和Math.max函数确保这个比例在Maxwidth / deviceWidth和Minwidth / deviceWidth之间。
  • 最后，它使用document.body.style.zoom属性设置整个页面的缩放比例。这会导致整个页面（包括所有元素）按照计算出的缩放比例进行缩放。 效果如下：

Snipaste_2024-04-23_17-08-21.png

需要注意的是，使用zoom属性来缩放整个页面可能不是最佳的实践，因为它可能导致一些布局和渲染问题。现代网页布局通常使用CSS媒体查询和灵活的布局技术来适应不同的屏幕大小，而不是依赖于缩放整个页面。

好啦，今天的分享就到这里啦，快去动手实践实践吧，各位小伙伴们，由于小编知识和技术有限，如果有写的不对的地方还请各位大佬批评指正，有什么不明白的地方欢迎给我留言，如果想继续努力学习提高，欢迎关注我，每天进步一点点，就是领先的开始，加油！如果觉得本文对你有帮助的话，欢迎各位点赞留言。

avatar
文章
阅读
粉丝