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/

html响应式布局，css响应式布局，响应式布局入门的更多相关文章

  1. 你不知道的css各类布局（四）之响应式布局

    响应式布局 概念 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局 布局特点 响应式设计的目标是确保一个页面在所有终端上(各种尺寸的PC.手机.手表.冰箱的Web浏览器等等)都能显示出令人满意的效 ...

  2. 一行css代码搞定响应式布局

    在这篇文章中,我将教你如何使用 CSS Grid 来创建一个超酷的图像网格图,它将根据屏幕的宽度来改变列的数量.最精彩的地方在于:所有的响应特性被添加到了一行 css 代码中.这意味着我们不必将 HT ...

  3. 前端（八）—— 高级布局：文档流、浮动布局、流式布局、定位布局、flex布局、响应布局

    高级布局:文档流.浮动布局.流式布局.定位布局.flex布局.响应布局 一.文档流 1.什么是文档流 将窗体自上而下分成一行一行,块级元素从上至下.行内元素在每行中从左至右的顺序依次排放元素 2.本质 ...

  4. Pure – 赞！轻量的、响应式的 CSS 模块集

    Pure 是一组轻量的,响应式的 CSS 模块,您可以使用在任何的 Web 项目中.充分考虑了移动设备中的使用,保持文件体积尽量小,每行 CSS 都进行了仔细的考虑. Pure 基于 Normaliz ...

  5. CSS 媒体查询创建响应式网站

    使用 CSS 媒体查询创建响应式网站  适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...

  6. Gradify - 提取图片颜色，创建响应式的 CSS渐变

    被请求的HTTP对象之间的延迟会有一个时间段,这个期间网页看起来不完整.Gradify 可以分析出图像中4个最常见的颜色,创建一个梯度(或纯色)作为图片占位符.Gradify 可以在在任何图像发现最突 ...

  7. css媒体查询：响应式网站

    css媒体查询:响应式网站 媒体查询 包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围. ...

  8. 响应式网站css reset

    响应式网站 css reset /* core.css v1.1 | MIT License | corecss.io */ html { font-family: sans-serif; font- ...

  9. BootStrap入门教程 (一) ：手脚架Scaffolding（全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts)）

    2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...

  10. 2021年3月-第02阶段-前端基础-Flex 伸缩布局-移动WEB开发_流式布局

    移动web开发流式布局 1.0 移动端基础 1.1 浏览器现状 PC端常见浏览器:360浏览器.谷歌浏览器.火狐浏览器.QQ浏览器.百度浏览器.搜狗浏览器.IE浏览器. 移动端常见浏览器:UC浏览器, ...

随机推荐

  1. Linux下实现定时器Timer的几种方法

    http://blog.csdn.net/lxmky/article/details/7669296 第六章 IO复用:select和poll函数 http://www.cnblogs.com/4ti ...

  2. USB 2.0 A型、B型、Mini和Micro接口定义及封装

    USB全称Universal Serial Bus(通用串行总线),目前USB 2.0接口分为四种类型A型.B型.Mini型还有后来补充的Micro型接口,每种接口都分插头和插座两个部分,Micro还 ...

  3. 《Gulp 入门指南》 ： 使用 gulp 压缩 JS

    <Gulp 入门指南> : 使用 gulp 压缩 JS 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 访问论坛获取帮助 压缩 js 代码可降低 js 文件大小,提高页面打 ...

  4. USACO3.44Raucous Rockers

    USACO挂了一小时..我坚持不懈的等..终于打开了  把3章最后一题交了 可以安心的睡去了 之前题意没看清楚 不知道要有序 写了一状压 结果TLE了 再优化也TLE 后来想写状态转移时发现 它必须有 ...

  5. tar 解压命令

    1.tar.gz文件的解压 tar zxvf  *.tar.gz 2.bz2属性的解压 tar jxvf  *.bz2

  6. oracle时间模型

    Oracle在9i或者早期的版本,对于性能优化方面,主要采用命中率模型,后面的版本,也保留着命中率模型,比如在awr报告中,Instance Efficiency Percentages (Targe ...

  7. 关于Azure Auto Scale的高级属性配置

    Auto Sacle是一种自动化管理云服务负载的功能,系统可以根据预先制定的规则,在满足条件的情况下对计算实例的数量进行增减从而可以用来优化使用Azure的计算资源,可以适用于Cloud Servic ...

  8. [C# 网络编程系列]专题六：UDP编程

    转自:http://www.cnblogs.com/zhili/archive/2012/09/01/2659167.html 引用: 前一个专题简单介绍了TCP编程的一些知识,UDP与TCP地位相当 ...

  9. python 零散记录(二) 序列的相关操作 相加 相乘 改变 复制

    序列相加: [1,2] + [3,4] == [1,2,3,4] #字符串也是序列的一种 'hello' + 'world' == 'hello world' #但是序列相加只限于相同类型的序列间相加 ...

  10. hibernate数据库方言

    hibernate数据库方言 mark一下 RDBMS 方言 DB2 org.hibernate.dialect.DB2Dialect DB2 AS/400 org.hibernate.dialect ...