响应式实例

最新推荐文章于 2023-05-15 20:13:36 发布
最新推荐文章于 2023-05-15 20:13:36 发布
阅读量540 收藏
点赞数 1
分类专栏： web前端 文章标签： 响应式 实例 媒介查询 单位 em rem
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Q___Narcissus/article/details/76408564
版权

效果展示：

 

效果1：（屏幕>800px）

 

 

 

 

效果2：(屏幕<800px&&屏幕>545px)

 

 

 

 

 

 

效果3:(屏幕<545px)

 

 

 

 

 

 

代码：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />
		<title></title>
		<style>
			body
			{
				background-color: #000;
				padding: 15px;
				width: 95%;
			}
			*
			{
				margin: 0;
				padding: 0;
			}
			.a
			{
				width: 100%;
				height: 50px;
				background-color: #666633;
				border-radius: 7px;
			}
			.top
			{
				font-size: 2rem;
				color: #FF9900;
				margin-top: 20px;
				font-family: "微软雅黑";
			}
			.one,.two,.three
			{
				float: left;
				list-style: none;
				margin-left: 20%;
				margin-top: 15px;
				color: white;
			}
			.one2,.two2,.three2
			{
				float: left;
				list-style: none;
				margin-left: 20%;
				margin-top: 15px;
				color: white;
			}
			.picture
			{
				max-width:100%;
			}
			.right-picture
			{
				max-width:100%;
			}
			.article
			{
				width: 55%;
				padding: 1%;
				float: left;
				background-color: white;
				margin-top: 15px;
				border-radius: 7px;
			}
			.right-article
			{
				width: 39%;
				padding: 1%;
				margin: 2% 0 2% 2%;
				float: left;
				background-color: white;
				margin-top: 15px;
				border-radius: 7px;
			}
			.right-picture-kuang
			{
				width: 39%;
				padding: 1%;
				margin: 0 0 0 2%;
				float: left;
				background-color: white;
				border-radius: 7px;
			}
			.down
			{
				width: 100%;
				height: 35px;
				background-color: #666699;
				float: left;
				border-radius: 7px;
				margin-top: 5%;
			}
			@media only screen and (max-width:800px )
			{
				body
				{
					background-color: #000;
					width: 100%;
					padding: 0px;
				}
				*
				{
					margin: 0;
					padding: 0;
				}
				.one,.two,.three
				{
					width: 30%;
					height: 30px;
					float: left;
					list-style: none;
					margin-left: 3%;
					margin-top: 5px;
					padding-top: 12px;
					border-radius: 7px;
					text-align: center;
					color: white;
					background-color: #666633;
				}
				.one2,.two2,.three2
				{
					width: 30%;
					height: 30px;
					float: left;
					list-style: none;
					margin-left: 3%;
					margin-top: 5px;
					padding-top: 12px;
					border-radius: 7px;
					text-align: center;
					color: white;
					background-color: #666699;
				}
				.a
				{
					width: 100%;
					height: 50px;
					margin: 0;
					background-color: black;
				}
				.top
				{
					width: 100%;
					height: 40px;
					font-size: 1.6rem;
					color: #FF9900;
					text-align: center;
					font-family: arial;
				}
				.article
				{
					width: 50%;
					float: left;
					background-color: white;
					margin-left: 15px;
					border-radius: 7px;
				}
				.right-article
				{
					width: 41%;
					padding: 1%;
					float: left;
					background-color: white;
					margin-top: 15px;
					border-radius: 7px;
				}
				.right-picture
				{
					max-width:100%;
				}
				.right-picture-kuang
				{
					width: 95%;
					padding: 1%;
					margin: 15px;
					background-color: white;
					margin-top: 15px;
					border-radius: 7px;
				}
				.down
				{
					width: 100%;
					height: 25px;
					background-color: black;
					float: left;
					margin-top: 5%;
				}	
			}
			@media only screen and (max-width:545px )
			{
				body
				{
					background-color: #000;
					width: 100%;
					min-width: 260px;
				}
				*
				{
					margin: 0;
					padding: 0;
				}
				.a
				{
					width: 100%;
					height: 100px;
				}
				.top
				{
					width: 100%;
					height: 40px;
					font-size: 1.3rem;
					color: #FF9900;
					text-align: center;
					font-family: arial;
				}	
				.one,.two,.three
				{
					float: left;
					width: 100%;
					height: 20px;
					background-color: #666633;
					list-style: none;
					margin-left: 0;
					margin-top: 5px;
					padding-top: 8px;
					text-align: center;
					color: white;
				}
				.one2,.two2,.three2
				{
					float: left;
					width: 100%;
					height: 20px;
					background-color: #666699;
					list-style: none;
					margin-left: 0;
					margin-top: 5px;
					padding-top: 8px;
					text-align: center;
					color: white;
				}
				.article
				{		
					width: 98%;
					background-color: white;
					margin: 15px 0 0 0;
					border-radius: 7px;
				}
				.right-article
				{
					width: 98%;
					padding: 1%;
					margin: 0;
					background-color: white;
					margin-top: 15px;
					border-radius: 7px;
				}
				.right-picture
				{
					max-width:100%;
				}
				.right-picture-kuang
				{
					width: 98%;
					padding: 1%;
					margin:15px 0 0 0;
					background-color: white;
					border-radius: 7px;
				}
				.down
				{
					width: 100%;
					height: 15px;
					background-color: black;
					float: left;
					margin-top: 5%;
				}		
			}
		</style>
	</head>
	<body>
		<div class="top">
			假如人生不曾相遇
		</div>
		<div class="a">
			<ul>
				<li class="one">相遇·依旧</li>
				<li class="two">相聚·禅意</li>
				<li class="three">相约·漂泊</li>
			</ul>
		</div>
		<div class="all">
			<div class="article">
				<img src="4.jpg" class="picture">
				<p>        相遇，是一个多么动人的名词啊！在这个世界上，两个人相遇的可能性是千万分之一，成为朋友的可能性是两亿分之一，而成为终生伴侣的可能性却只有五十亿分之一。人与人的相遇，都是那么难得，那么偶然，又是那么美好的事。</p>
				<p>        假如人生不曾相遇，我还是我，你还是你。行走在孤独而陌生的城市里，每天看日出日落，听虫鸣鸟叫，与自己的影子彼此安慰，冷暖自知。遇到便是缘分，碰到就会有福分。我们这一生总会遇到各种各样的人，不论遇上谁，碰上谁，遇到了就要以诚相待，用心关怀，彼此温暖，彼此珍惜。</p>
				<p>        假如人生不曾相遇，我不会知道有一个知心的朋友是多么的幸福。漫长的岁月里，我们彼此依靠，彼此鼓励。在倾诉和聆听之中，感知朋友身形；在交流和接触之中，不断握手和感激。你能理解我失意彷徨时的酸楚，我来安慰你心灰意冷时的痛苦。</p>
				<p>        忙碌的生活，无法让我们遗忘对彼此的牵挂；遥远的距离，也隔不断我们真挚的情谊。即便过了十年，二十年，我们饱经沧桑，满脸皱纹，当我们的手握在一起的时候，依然能感受到那份对彼此的赤诚之心。</p>
			</div>
			<div class="right-article">
				<p>        假如人生不曾相遇，我不会懂得爱情存在的真正意义。在人海茫茫，众生芸芸之中遇见你，就像是在偶然中赴那个必然的约定，没有早一步，也没有晚一步，一切都是那么的自然，自然到不知不觉你已经住进到了我的心灵深处。</p>
				<p>        假如人生不曾相遇，我不会知道有一种思念让人魂牵梦绕；有一种眷恋让人一往情深；有一种目光不远不近，却一直在守望着。假如人生不曾相遇，就不会拥有相拥的欢喜，也不会产生分离的孤寂。那些被称为爱的感觉，还在四处游荡；那些轻声呼唤过的柔情，也在四处漂泊；那些梦里的眼神，将被琐碎的日子收藏；那些点滴流过的眼泪，也不会汇聚成海。</p>
				<p>        生活原是一潭死水，有了与你的相遇，才泛起点点涟漪。你是我一生中最美的相遇，此生有你，足以。相逢何必曾相识，遇上了便是缘分。我们也不必去奢求永远，只要曾经拥有过，温馨的往昔都会留存在记忆中。感谢上苍，使我与你相遇。愿上苍保佑你的善良和真诚，愿我们常相聚，相遇是最美好的事。感谢上苍让我们在人生之中相遇，无论是擦肩而过，还是相扶相持，都十分珍贵，永远珍惜这份美好吧。这篇美文送给与我相遇的你，相遇很美，更是因为相遇，我们才变成更好的彼此。</p>
			</div>
			<div class="right-picture-kuang">
				<img src="01.jpg" class="right-picture">
				<img src="02.jpg" class="right-picture">
			</div>
		</div>
		<div class="down">
			<ul>
				<li class="one2">相遇·依旧</li>
				<li class="two2">相聚·禅意</li>
				<li class="three2">相约·漂泊</li>
			</ul>
		</div>
	</body>
</html>

 

 

Q___Narcissus
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
能实现响应式的简单例子
07-02
一个简单的能实现响应式的例子，有助于帮那些刚学网页设计的同学理解。
响应式布局实例
xcLeigh
09-27 1670
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
响应式的实例
Dear_Mr的博客
05-15 474
响应式的实例两个在线展示响应式的链接：https://vamouszj.github.io/ResponsiveWeb/https://vamouszj.github.io/responseTimeLine/相应的知识点的总结：响应式图片gulp入门CSS Sprite高度塌陷关于li之间存在空白字符的问题CSS的px,em,rem响应式网站
响应式页面案例
03-29
一个使用了bootstrap框架，同时使用了less的案例，实现了简单的响应式页面效果
bootstrap响应式表格实例详解
08-30
Bootstrap 响应式表格实例详解 Bootstrap 响应式表格实例详解是指使用 Bootstrap 框架来实现响应式表格的设计和开发。响应式表格是指可以根据不同设备和屏幕尺寸自动调整布局和样式的表格。Bootstrap 提供了一些预...
响应式布局的简单案例
09-24
下面小编就为大家带来一篇响应式布局的简单案例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
Bootstrap 响应式实用工具实例详解
08-31
Bootstrap响应式实用工具是开发移动端友好网页的重要组件，它提供了丰富的辅助类，使得开发者能够根据设备屏幕尺寸调整内容的展示。这些工具通过结合媒体查询（Media Queries）来判断设备类型，进而实现内容在不同...
响应式布局案例分享
weixin_44997264的博客
11-15 2614
前言 随着互联网时代的发展，用户对布局有了一个新的要求，大气，美观，能够在不同的设备上呈现令人焕然一新的效果。此时，一个全新的概念—响应式布局应运而生。它的诞生为我们的移动端布局带来了很大的便利性，因此学习响应式的布局已经是势在必行的形式了 一、响应式布局是什么？ 其实个人通俗点来说它就是兼容pc端和移动端的一种布局，它能更直观的去给用户呈现一个界面，让用户良好的体验， 1.viewport viewport 是用户网页的一个可视化区域。手机浏览器是把页面放在一个虚拟的"窗口（vie...
响应式完整网站案例+源码
03-22
插件描述：完整的网站前端+源码，各种控件功能齐全，最适合入门者. 参考示例：http://www.jq22.com/jquery-info6300
响应式布局案例
weixin_30537451的博客
07-13 140
响应式布局 响应式布局在面对不同分辨率设备灵活性强，在平时的网页设计中基本上都要用到响应式布局设计，它给我们提供了良好的用户浏览页面，能带给我们更好的客户体验，下面给大家分享下我做的一个简单的响应式的布局： 不同的页面会适用不同大小浏览器页面，它会随着分辨率的变化而变化。代码展示如下： <!DOCTYPE html> <html> <head&g...
响应式实例-兰途科技(jq)
维克多噗噗的博客
05-02 454
首页html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="Author" content="Fly"> <title>Title</title> <!-- 移动端不能缩放 --> <meta name="viewport" content="width=device-width
六个响应式布局案例
m0_58467275的博客
05-15 914
响应式布局案例分析，内含弹性布局使用
响应式布局以及几个小案例
weixin_44356372的博客
05-16 834
1、什么是媒体查询？ 概念：为不同尺寸的屏幕设定不同的CSS样式 用法：@media screen and (min-device-width:100px) and (max-device-width:300px){} 意为设备屏幕宽度100px到300px之间的使用 @media的常用参数 width、height 浏览器宽度和高度 device-width 设备屏幕的宽度 device-height 设备屏幕的高度 2、flex弹性布局 Flex 是 Flexible Box 的缩写，意为"弹
响应式布局之案例--常见电商类页面效果
qq_53548177的博客
01-29 1435
本博客由于字数原因从作者上一篇博客摘分出来进行讲解，如果想了解响应式布局可以点此链接进入。 响应式布局的布局特点为确保一个页面在所有终端上，都能显示出令人满意的效果，用一句话来概括就是 一套方案，处处运行。 废话不多说，先来看看页面在移动端和pc端的效果 pc端： 移动端： 可以看出来，最上面是banner区，左侧导航，右侧内容展示，妥妥的电商平台网页，实现方法就是调整布局的宽高占比、横纵排列以及细节优化。怎么具体实现请看代码： html部分很简单，只有div盒子以及li标签。 <div.
在固定框高内图片剧中显示，不变形
12-05 500
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com...
实现简易的 Vue 响应式
CRMEB小程序商城的博客
03-24 4917
我们首先封装一个响应式处理的方法 defineReactive，通过 defineProperty 这个方法重新定义对象属性的 get 和 set 描述符，来实现对数据的劫持，每次 读取数据 的时候都会触发 get ，每次 更新数据 的时候都会触发 set ，所以我们可以在 set 中触发更新视图的方法 update 来实现一个基本的响应式处理。 /** * @param {*} obj 目标对象 * @param {*} key 目标对象的一个属性 * @param {*} val 目标对象的
响应式布局的两个例子
yyc2018的博客
09-26 2612
第一个例子–媒体查询<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .a{ border: 1px solid #000000; width: 100p
pinia解构数据响应式
最新发布
04-04
Pinia是一个基于Vue 3的状态管理库，它提供了一种解构数据响应式的方式。Pinia的核心概念是使用store来管理应用程序的状态，并通过响应式的方式将状态与组件进行绑定。 Pinia的解构数据响应式主要有以下几个特点： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值