hhhkhhh 2016-07-25
html响应式布局,css响应式布局,响应式布局入门
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 2016年7月25日 15:31:51 星期一
一、效果如下:
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 星期一
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT