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. 李洪强iOS开发-网络新闻获取数据思路回顾

    李洪强iOS开发-网络新闻获取数据思路回顾 01 创建一个继承自AFHTTPSessionManager的工具类:LHQNetworkTool 用来发送网络请求获取数据  1.1 定义类方法返回单例对 ...

  2. java.lang.String内部结构的变化

    原文:http://java-performance.info/changes-to-string-java-1-7-0_06/ 作者:Mikhail Vorontsov IMPORTANT: Jav ...

  3. Oracle正则表达式

       Oracle正则表达式 正则表达式具有强大.便捷.高效的文本处理功能.能够添加.删除.分析.叠加.插入和修整各种类型的文本和数据.Oracle从10g开始支持正则表达式. 下面通过一些例子来说明 ...

  4. SQL Server 字段状态判断语句

    selct newName=case when  条件 then '否' else '是' end from tableName

  5. xamarin for vs2013

    安装需求(下载的包及版本) 先安装VS2013 然后到官网下Xamarin,运行后会自动下载以下文件 这是下载的详细列表 jdk-6u39-windows-i586.exe(69.73M) Andro ...

  6. HDU-3719 二叉搜索树

    http://acm.hdu.edu.cn/showproblem.php?pid=3791 用数组建立二叉树: 二叉搜索树 Time Limit: 2000/1000 MS (Java/Others ...

  7. android获取package name

    下载apk resigner(此被,,) 另外一个下载url 配置好android 环境,ANDROID_HOME 和路径直接到sdk,将.apk拖到此apk resigner,将会得出package ...

  8. input hidden用法

    之前获取数据传数据,都是写在全局变量里,今天老板告诉我说用input hidden来存,我百度了一下,确实是个好方法,记录之: 1 隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或 ...

  9. XPath在asp.net中查询XML -摘自网络

    .NET Framework 2.0中可以使用System.Xml.XPath命名空间下的类对XML文档进行基于路径的查询,在查询过程中需要构造类似SQL的查询字符串,该字符串遵循XPath语法.它由 ...

  10. IoC/DIP其实是一种管理思想

    关于IoC的的概念提出来已经很多年了,其被用于一种面象对像的设计.我在这里再简单的回顾一下这个概念.我先谈技术,再说管理. 话说,我们有一个开关要控制一个灯的开和关这两个动作,最常见也是最没有技术含量 ...