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. Myeclipse2013 SVN安装方法以及项目上传到svn服务器

    1. 打开 Myeclipse 工具栏下的Help下的Install from Site 2.打开后弹出窗口, 并点击Add标签,如下图: 3.现在是最重要的一步,填写相关信息. 在对话框Name输入 ...

  2. 解决wordpress上传的文件尺寸超过 php.ini 中定义的 upload_max_filesize 值。

    上传的文件尺寸超过 php.ini 中定义的 upload_max_filesize 值. 解决方法:修改/etc/php5/apache2/php.ini文件中的 post_max_size = 6 ...

  3. 被忽视的eMMC——A1 SD Bench闪存测试

    一直以来,大家对手机的配置方面都比较关注CPU和GPU的架构.频率.核心数等,却经常忽略了手机闪存的速度.实际上手机的闪存素质对手机日常操作的响应.载入速度同样起到举足轻重的影响,今天给大家介绍的则是 ...

  4. VS2013 取消 直接单击文件 然后直接打开

    工具——选项——

  5. C#判断操作系统类型汇总

    Windows操作系统的版本号一览 操作系统 PlatformID 主版本号 副版本号 Windows95 1 4 0 Windows98 1 4 10 WindowsMe 1 4 90 Window ...

  6. Datetime中yyyy-MM-dd-hh-mm-ss的格式

    namespace yyyy_MM_dd_hh_mm{    class Program    {        static void Main(string[] args)        { wh ...

  7. SharePoint 2010 母版页定制小思路介绍

    转:http://tech.ddvip.com/2013-11/1384521515206064.html 介绍:我们使用SharePoint2010做门户网站,经常需要定制母版页,但是2010提供的 ...

  8. 约瑟夫环的java实现

    转自:http://www.cnblogs.com/timeng/p/3335162.html 约瑟夫环:已知n个人(以编号1,2,3...n分别表示)围坐在一张圆桌周围.从编号为k的人开始报数,数到 ...

  9. ArcGIS_系列中文教程

    转自:http://www.cnblogs.com/gispeng/archive/2008/04/15/1154212.html  ArcGIS_系列中文教程 如链接有问题请在留言中说明ArcGIS ...

  10. VS发布,TFS邮件设置截图

    vs2012发布截图: TFS邮件设置截图: