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. Javascript 取小数点后面N位

    用Javascript取float型小数点后两位,例22.127456取成22.13,如何做? 1. 最笨的办法....... [我就怎么干的.........] 1function get() 2{ ...

  2. [转贴]C++调用openssl 的AES加密例子

    #include <stdio.h>#include <string.h>#include <sys/types.h>#include <sys/stat.h ...

  3. USB究竟是什么？看完这篇文章我就明白了！

    在早期,USB接口的出现似乎仅仅是要解决一些简单外设诸如鼠标.键盘之类的设备与电脑的连接问题,很显然,这些外设所产生的数据量是极低的,所以,USB规范所定义的数据速率是1.5Mbps,数据还是双向分时 ...

  4. Android 自定义组件随着手指自动画圆

    首先自定义一个View子类: package com.example.androidtest0.myView; import android.content.Context; import andro ...

  5. sed 变量替换 把m.txt文件中的$i替换成$j

    zabbix:/root/zabbix# cat a1.sh for j in {1..48} do sed "s/\$i/$j/g" m.txt >>tmp.txt ...

  6. 【HDOJ】1695 GCD

    莫比乌斯反演简单题目. /* 1695 */ #include <iostream> #include <string> #include <map> #inclu ...

  7. （转载）mysql decimal、numeric数据类型

    (转载)http://www.cnblogs.com/qiantuwuliang/archive/2010/11/03/1867802.html 可能做程序的人都知道,float类型是可以存浮点数(即 ...

  8. NHibernate加载DLL错误

    这几天在开发关于Rest的服务,其中用到了NHibernate来进行数据库交互,突然有一天发现了一个错误,如下: Could not load file or assembly 'NHibernate ...

  9. Python手动构造Cookie模拟登录后获取网站页面内容

    最近有个好友让我帮忙爬取个小说,这个小说是前三十章直接可读,后面章节需要充值VIP可见.所以就需要利用VIP账户登录后,构造Cookie,再用Python的获取每章节的url,得到内容后再使用 PyQ ...

  10. 【转】Flask安装

    Flask 依赖两个外部库:Werkzeug 和 Jinja2 . Werkzeug 是一个 WSGI(在 Web 应用和多种服务器之间的标准 Python 接口) 工具集.Jinja2 负责渲染模板 ...