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. org.springframework.web.bind.ServletRequestDataBinde

    org.springframework.validation Class DataBinder java.lang.Object org.springframework.validation.Data ...

  2. Lua和Javascript差异对比

    Lua模拟器js方案 1.语法级模拟lua与js语言差异 1.1注释 js 为//,lua为--. 1.2变量js利用val来声明全局变量不存在局部变量,lua则不需要直接定位则为全局变量,local ...

  3. bzoj1899

    显然如果只有一个窗口,是一道贪心的题目,直接让吃饭慢的排在前面即可 两个窗口的话,我们还是根据这个原则 先对吃饭时间降序排序,然后这是一个dp 假如设当前处理到第i个人,当在窗口1的打饭时间确定了,窗 ...

  4. Hadoop RPC简单实例

    1.导入Hadoop-Common-2.6.0.jar导入工程,里面的IPC实现RPC需要的文件. 2.服务器端  (1)服务接口 package com.neu.rpc.server; /** * ...

  5. 64位windows7 上安装32位oracle 10g 的方法

    操作系统: windows7 中文旗舰版 oracle安装版本: 10.2.0.1 中文版,升级补丁至 10.2.0.3 下面说正题首先,我们要解除oracle安装的windows版本检测1.编辑安装 ...

  6. C# json

    C# 解析 json JSON(全称为JavaScript Object Notation) 是一种轻量级的数据交换格式.它是基于JavaScript语法标准的一个子集. JSON采用完全独立于语言的 ...

  7. [MarsZ]Unity3d游戏开发之Unity3d全策划配置新手指引

    Unity3d全策划配置新手指引 前言... 2 版本... 2 作者... 2 功能... 2 类型... 2 触发类型... 2 步骤类型... 3 实现... 4 简要... 4 策划方面... ...

  8. sadfa

    2015/03/16         星期一 在Android平台下编写客户端程序,界面只有开关若干个. 代码更新与3.17号 mainActivity.java: package com.fan.m ...

  9. 开发小技巧：C#逐个输出字符

    静态自定义方法: static int counter = 0; static string displayString = "This string will appear one let ...

  10. poj 3628 （搜索or背包）

    好久没看背包题目了!!!生疏了!!!! 这题是背包题!!!不过对于这题,解决方法还是搜索省时!!! 题意:第一行给你一个N和VV,接下来N行,每行一个数,求得是任选N个数组合求和,求组合的和大于VV而 ...