html响应式布局,css响应式布局,响应式布局入门

html响应式布局,css响应式布局,响应式布局入门

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

蕃薯耀 2016年7月25日 15:31:51 星期一

http://fanshuyao.iteye.com/

一、效果如下:

1、当屏幕宽度大于或等于960px时,显示为:

html响应式布局,css响应式布局,响应式布局入门

2、当屏幕宽度小于960px且大于640px时,显示为:

html响应式布局,css响应式布局,响应式布局入门

3、当屏幕宽度小于640px时,显示为:

html响应式布局,css响应式布局,响应式布局入门

二、代码:

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/

上一篇:laravel php artisan migrate 数据迁移时出现的[HY000][1045]错误


下一篇:GATK原理及流程