html响应式布局，css响应式布局，响应式布局入门

最新推荐文章于 2024-10-09 12:42:07 发布
最新推荐文章于 2024-10-09 12:42:07 发布
阅读量200 收藏
点赞数
分类专栏： html css 蕃薯耀分享 文章标签： html响应式布局 css响应式布局 响应式布局 蕃薯耀 响应式布局入门
蕃薯耀分享 同时被 3 个专栏收录
409 篇文章 1 订阅
订阅专栏
html
41 篇文章 0 订阅
订阅专栏
css
24 篇文章 0 订阅
订阅专栏
本文介绍了一种基于HTML和CSS的响应式网页布局方案，通过不同屏幕尺寸下的样式调整实现良好的用户体验。具体包括三类视口宽度下的布局展示：大于等于960px、641px至959px、小于等于640px，并提供了完整的代码实例。
摘要由CSDN通过智能技术生成

html响应式布局，css响应式布局，响应式布局入门

 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

蕃薯耀 2016年7月25日 15:31:51 星期一

http://fanshuyao.iteye.com/

 

一、效果如下：

1、当屏幕宽度大于或等于960px时，显示为：



 

2、当屏幕宽度小于960px且大于640px时，显示为：




 

3、当屏幕宽度小于640px时，显示为：



 

 

二、代码：

 

1、Html页面代码：

需要注意的是引入的link：

里面使用了Media属性：

media="screen and (min-width:641px) and (max-width: 959px)"

 

完整代码：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>responsive 学习</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/responsive/index.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:960px)" href="${pageContext.request.contextPath}/css/responsive/index-960.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:641px) and (max-width: 959px)" href="${pageContext.request.contextPath}/css/responsive/index-641-959.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width:640px)" href="${pageContext.request.contextPath}/css/responsive/index-640.css">
</head>
<body>

	<div class="container">
		<div class="myheader">myheader</div>
		<div class="mybody">
			<div class="left">left</div>
			<div class="middle">middle</div>
			<div class="right">right</div>
		</div>
		<div class="myfooter">footer</div>
	</div>

</body>
</html>

 

2、Css代码：

index.css

默认样式。

@CHARSET "UTF-8";
body{
	margin: 0;
	padding: 0;
}
.container{
	width: 960px;
	font-size: 14px;
	color: #fff;
	margin: 5px auto;
}
.myheader{
	background-color: gray;
	height: 50px;
}
.left,.middle,.right{
	height: 400px;
}
.left{
	width: 100px;
	background-color: green;
	float: left;
	margin-right: 10px;
}
.middle{
	width: 640px;
	background-color: #bbb;
	float: left;
}
.right{
	width: 200px;
	background-color: maroon;
	float: right;
}
.myfooter{
	background-color: black;
	height: 30px;
	clear: both;
}

 

index-960.css

表示大于等于960px显示的样式。

这个和默认的css样式是一样的，没有区别，因为默认就是用浏览器查看，宽度大于大于等于960px，这样index-960.css可以省略。

@CHARSET "UTF-8";
body{
	margin: 0;
	padding: 0;
}
.container{
	width: 960px;
	font-size: 14px;
	color: #fff;
	margin: 5px auto;
}
.myheader{
	background-color: gray;
	height: 50px;
}
.left,.middle,.right{
	height: 400px;
}
.left{
	width: 100px;
	background-color: green;
	float: left;
	margin-right: 10px;
}
.middle{
	width: 640px;
	background-color: #bbb;
	float: left;
}
.right{
	width: 200px;
	background-color: maroon;
	float: right;
}
.myfooter{
	background-color: black;
	height: 30px;
	clear: both;
}

 

index-641-959.css

表示大于640px且小于960px显示的样式。

@CHARSET "UTF-8";
.right{
	display: none;
}
.middle{
	width: 850px;
}

 

index-640.css

表示小于或等于640px显示的样式。

@CHARSET "UTF-8";
.left,.right{
	display: none;
}
.middle{
	width: 100%;
}

 

 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

蕃薯耀 2016年7月25日 15:31:51 星期一

http://fanshuyao.iteye.com/

蕃薯耀
关注
专栏目录
＜CSS＞响应式布局
Snowyufly的博客
07-25 260
响应式布局的制作
响应式布局入门共4页.pdf.zip
10-30
本资料“响应式布局入门共4页.pdf”是一个压缩包文件，虽然名称提及4页，但实际内容未给出，不过我们可以基于响应式布局这一主题来深入探讨相关的知识点。 1. **响应式设计的基本原理**： 响应式设计的核心理念是...
【Web前端】CSS 响应式设计（补充）
一条晒干的咸鱼的博客
09-11 1281
随着移动设备的普及，网页设计的焦点逐渐转向了响应式设计。响应式设计不仅要求网页在各种屏幕尺寸上良好展示，还要适应不同设备的特性。
CSS的响应式布局
aizou6838的博客
08-01 144
响应式布局是什么 它是相对于固定像素大小的网页而言的，顾名思义，响应式布局就是网页能够响应各种各样不同分辨率大小的设备，能够将网页很好的呈献给用户。 如何实现响应式布局？ 1、CSS3@media查询 使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用...
CSS中的响应式布局
qq_37493515的博客
03-01 435
一、响应式布局 在小型网站建设中，有运用一套代码代码来适应不同终端分辨率的需求，优点：节约制作时间、节约制作成本、便于维护等优点。 CSS3利用媒体查询（media queries）即可针对不同的媒体类型定义不同的样式，从而实现响应式布局 。也可以针对不同的分辨率设置不同的样式。 1024分辨率以上：PC端 1024 ~ 768 : pad pro 768 ~ 450 : pad mini , m...
CSS--响应式布局
BtWangZhi的博客
07-30 486
1 响应式布局可用于页面大小变化的场景，可在css文件中直接写变化后各个属性的大小，正常引入即可，还有一种，在引入的语句中说明屏幕大小变化到一点的尺寸时自动引入该css文件，具体可看如下Demo。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>
Web-前端html+css从入门到精通 208. 响应式布局之两种操作模式.zip
05-23
响应式布局主要依赖于CSS3的Media Queries（媒体查询）和Flexible Box（弹性盒模型）这两种操作模式。Media Queries允许我们根据设备的特性，如宽度、高度、分辨率等，来应用不同的CSS样式。这样，网页的布局可以...
Web-前端html+css从入门到精通 207. 响应式布局之媒体查询语法.zip
05-23
响应式布局是现代网页设计的关键技术，它使得网站在不同设备和屏幕尺寸下都能提供良好的用户体验。本课程聚焦于响应式布局中的一个核心组件——媒体查询（Media Queries），它是实现设备适应性的重要工具。通过学习...
响应式布局入门
07-18
CSS3的媒体查询（Media Queries）是实现响应式布局的核心工具，它可以根据设备特性，如视口宽度、设备像素比等，来应用不同的CSS样式。 在CSS2时代，媒体类型（Media Types）如`screen`、`print`、`handheld`等被...
CSS-响应式布局
软工二班秦同学的博客
03-31 280
响应式布局
css 响应式布局
weixin_47188500的博客
03-15 172
media-query，根据不同的屏幕宽度设置根元素font-size。document.body.clientHeight body高度。rem的弊端：具有“阶梯性” 某一像素区间内用的是同一个尺寸。rem：相对长度单位，相对于根元素，常用于响应式布局。window.innerHeight 网页视口高度。em：相对长度单位，相对于父元素。vh：网页视口高度的1/100。vm：网页视口宽度的1/100。rem，基于根元素的相对单位。vmax：取俩者的最大值。vmin：取俩者的最小值。
CSS 响应式布局
Alkali!的博客
07-25 124
当屏幕宽度满足特定条件时应用css。
css响应式布局
木子小奇奇
02-27 759
两种方式，一种是直接在link中判断设备的尺寸，然后引用不同的css文件：&lt;link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)"&gt;意思是当屏幕的宽度大于等于400px的时候，应用styleA.css在media属性里：screen 是媒体类型里的一种，C...
CSS响应式布局
最新发布
2401_82561004的博客
10-09 1073
CSS 响应式布局也称自适应布局，是 Ethan Marcotte 在 2010 年 5月份提出的一个概念，简单来讲就是一个网站能够兼容多个不同的终端（设备），而不是为每个终端做一个特定的版本。这个概念是为解决移动端浏览网页而诞生的。响应式布局能够为使用不同终端的用户提供很好的用户体验，而且随着大屏智能手机的普及，用“大势所趋”来形容也不为过。接下来我们以媒体查询为例来具体演示一下响应式布局的实现。
Bootstrap响应式布局实战：从入门到登录界面
2. **响应式布局**：Bootstrap的核心优势是其强大的响应式设计能力，通过CSS媒体查询和预定义的网格系统，适应不同设备屏幕大小。课程中将分别演示如何在各种场景下实现窄屏、固定、流动布局，让网页在手机、平板和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值