响应式开发——示例一

直接贴代码,效果图在后面:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>响应式布局</title>
	<link rel="stylesheet" href="response.css">
</head>
<body>
	<div id="container">
		<div id="header"> <p>header</p> </div>
		<div id="left"> <p>left</p> </div>
		<div id="main"> <p>main</p> </div>
		<div id="right"> <p>right</p> </div>
		<div id="footer"> <p>footer</p> </div>
	</div>
</body>
</html>

response.css

/*基础样式*/
*{margin:0; padding:0; }
#container{margin:0 auto; width:1300px; background:#ddd; font-size:3em;}
#header{margin-bottom:5px;background:orange;height:200px;width:100%; float:left;}
#left{margin-bottom:5px;background:orange;height:400px; width:350px;float:left;}
#main{margin-bottom:5px;background:orange;height:400px;width:580px;margin-left:10px;margin-right:10px;float:left;}
#right{margin-bottom:5px;background:orange;height:400px;width:350px;float:left;}
#footer{background:orange;height:100px;width:100%;float:left; }

/*最大宽度小于1000px,最小宽度大于700px时,使用下面的样式*/
@media screen and (max-width:1000px) and (min-width:700px) {
	#container{margin:0 auto;width:100%; background:#ddd; font-size:2em;}
	#left{margin-bottom:5px;background:orange;height:200px; width:35%;float:left;}
	#main{margin-bottom:5px;background:orange;height:200px;width:64%;margin-left:0;margin-right:0;float:right;}
	#right{margin-bottom:5px;background:orange;height:200px;width:100%;float:left;}
}

/*最大宽度小于699px时,使用下面这种样式*/
@media screen and (max-width:699px){
	#container{margin:0 auto;width:100%; background:#ddd; font-size:1.5em;}
	#header{margin-bottom:5px;background:orange;height:100px;width:100%; float:left;}
	#left{margin:0;margin-bottom:5px;background:orange;height:150px; width:100%;float:left;}
	#main{margin-bottom:5px;background:orange;height:150px;width:100%;margin-left:0;margin-right:0;float:left;}
	#right{margin-bottom:5px;background:orange;height:100px;width:100%;float:left;}
}

  

  

效果图:

宽度大于1000px时

700px < 宽度 < 1000px时

当最大宽度小于699px时,

需要注意的有以下几点:

1、上面的代码在移动端并不会如此显示,因为移动端的显示器和电脑的显示器像素比例是有区别的。

2、从1000以上的宽度变为1000以下,700以上,那么@media中写的会覆盖从祖先继承来的样式。此时1000px以上的样式为父,1000到700px的样式为子。

  然后宽度变为600px,小于了700px,那么就会加载第三个样式,此时第三个样式的父亲为第二个样式。继承的是第一个样式、第二个样式。以此类推。

原文地址:https://www.cnblogs.com/-beyond/p/9059707.html

时间: 2024-10-08 02:22:43

响应式开发——示例一的相关文章

响应式开发

一:网页布局方式 1.固定宽度布局:为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页. 2.流式布局:为网页设置一个相对的宽度,通常以百分比做为长度单位. 3.栅格化布局:将网页宽度人为的划分成均等的长度,然后排版布局时则以这些均等的长度做为度量单位,通常利用百分比做为长度单位来划分成均等的长度. 4.响应式布局:通过检测设备信息,决定网页布局方式,即用户如果采用不同的设备访问同一个网页,有可能会看到不一样的内容,一般情况下是检测设备屏幕的宽度来实现. 注:以上几种布局方式并不

原理+实战 快速掌握响应式开发精髓

第1章 课程介绍介绍什么是响应式:课程安排:学习建议1-1 导学1-2 课程介绍 第2章 实战利器逐一讲解响应式web开发的理论,工具和方法.对响应式开发中涉及的各核心技术进行深入的分析.知识点概念/原理与示例结合,让你全面/透彻的理解和掌握响应式开发.2-1 单位像素2-2 媒体查询-视口12-3 媒体查询-视口22-4 媒体查询-媒介查询2-5 设计稿2-6 浮动2-7 flex新科技2-8 栅格系统2-9 分而治之&预处理工具2-10 JavaScript2-11 调试方法 第3章 项目实

springboot 使用webflux响应式开发教程(二)

本篇是对springboot 使用webflux响应式开发教程(一)的进一步学习. 分三个部分: 数据库操作webservicewebsocket 创建项目,artifactId = trading-service,groupId=io.spring.workshop.选择Reactive Web , Devtools, Thymeleaf , Reactive Mongo.WEB容器spring-boot-starter-webflux 附带了 spring-boot-starter-reac

原理+实战 快速掌握响应式开发

第1章 课程介绍介绍什么是响应式:课程安排:学习建议1-1 导学1-2 课程介绍 第2章 实战利器逐一讲解响应式web开发的理论,工具和方法.对响应式开发中涉及的各核心技术进行深入的分析.知识点概念/原理与示例结合,让你全面/透彻的理解和掌握响应式开发.2-1 单位像素2-2 媒体查询-视口12-3 媒体查询-视口22-4 媒体查询-媒介查询2-5 设计稿2-6 浮动2-7 flex新科技2-8 栅格系统2-9 分而治之&预处理工具2-10 JavaScript2-11 调试方法 第3章 项目实

初识响应式开发

1.响应式布局(respond layout):一个网站能够兼容到多个终端. 2.响应式布局原理:使用css3中的Media Query(媒介查询)screen的宽度来指定某个宽度区间的网页布局 超小屏幕(移动设备) 768px以下 小屏设备 768px - 992px 中等屏幕 992px-1200px 宽屏设备 1200px-1920px 3.响应式和移动web的区别 开发模式 移动web开发+pc开发 响应式开发 应用场景 一般在已经有pc端的网站,只需单独开发移动端 针对新建的网站,一套

带你玩转JavaWeb开发之五-如何完成响应式开发页面

响应式页面开发 使用BootStrap开发一个响应式的页面出来 响应式开发就是同一个页面在PC端与手机端Pad端显示不同的效果,以给用户更好的体验 需求分析 开发一套页面,让用户能够在PC端, Pad端, 手机端同时正常显示啊,并且不能够影响显示效果 技术分析 BootStap概述 什么是BootStrap BootStrap有什么作用 什么是响应式 BootStrap的中文网 http://www.bootcss.com 下载BootStrap BootStrap结构 全局CSS bootSt

前端响应式开发

最近在工作中遇到一些让人头疼的问题--多媒体查询,也就是大家所说的响应式布局(多终端适配).在实际的开发过程中,响应式的设计使得多终端的适配变得非常方便,响应式展现的方式,更有一种组装变形金刚的感觉,但也在实际工作中发现了许多问题: 一.开发思维变得复杂 在我们开发页面的时候,思维无法专注于单一的PC端.移动端以及Pad端,开发每一个元素与版块的时候,都需要考虑多终端适配:所以建议大家在接到这一类项目的时候,不要急于去开发,先把所有的终端页面设计图全部浏览的看一遍,不单单光是看,看的过程中脑海里

前端全栈架构,组件式开发,响应式开发,全栈工程师架构,用户界面架构,企业级架构项目实战

我本是一名文科专业半路出家的前端开发人员,从最初只会切图和写CSS.Html到现在会写点JS,一路坑坑洼洼,也是经历了很多,从2010年开始就用WordPress开设了自己的博客,虽然内容零零散散的并不多,但是多多少少也留下了时光的缩影,一直希望自己有一个自留地.用Node.js做服务端替换WordPress是去年的一个想法,由于一直腾不出时间,所以拖到了现在.当然了WordPress作为全球用户量最广的开源博客程序,易用性等诸多好处无可厚非,光自己的博客在过去几年就用了很多套模板,也用它做过很

响应式开发思想

响应式设计的优缺点优点解决了设备之间的差异化展示缺点兼容性代码多,工作量大,加载速度受影响对原有网站布局会产生影响,用户判断未必精确 响应式设计的原则移动优先在设计的初期就要考虑的页面如何在多终端展示 渐进增强充分发挥硬件设备的最大功能 实现响应式布局:1.CSS3-Media Query(最简单的方式)CSS3-Media Query 常见属性: device-width,device-height —— 屏幕宽高(设备物理宽高) width,height —— 渲染窗口宽高(实际宽高) or