设计与原图1比1比例的响应式全兼容网页
匿名 · 更新于 2015/10/19
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<style type="text/css">
body {
margin: 0;
padding: 0;
font-size: 62.5%;
font-family: '微软雅黑';
}
- img {
width: 100%;
}
div.header {
background: #085d99;
color: #fff;
overflow: hidden;
padding: 0;
}
span.logo {
display: block;
float: left;
}
span.nav {
display: block;
overflow: hidden;
}
.logreg {
background: #282828;
color: #fff;
font-weight: 500;
}
.logbtn {
background: url(1_07.png) no-repeat;
}
.regbtn {
background: url(1_08.png) no-repeat;
}
.kjnav {
margin: 0 auto;
overflow: hidden;
}
.kjnav > div {
float: left;
color: #fff;
overflow: hidden;
}
.kjnav > div:nth-child(1) {
background: #c00000 url(1_10.png) no-repeat;
text-align: center;
}
.kjnav > div:nth-child(1), .kjnav > div:nth-child(2) {
/background:#c00000;/
}
.kjnav > div:nth-child(3), .kjnav > div:nth-child(4) {
background: #0f67ff;
}
.kjnav > div:nth-child(2){
}
.kjnav > div:nth-child(2) > div:nth-child(1){
background:#69a1ff url(1_11.png) no-repeat;
}
.kjnav > div:nth-child(2) > div:nth-child(2){
background:#ffc265 url(1_12.png) no-repeat;
}
.kjnav > div:nth-child(2) > div:nth-child(3){
background:#a4db1d url(1_13.png) no-repeat;
}
.kjnav > div:nth-child(2) > div:nth-child(4){
background:#9f56ff url(1_14.png) no-repeat;
}
.kjnav > div:nth-child(3){
background:#0f67ff;
}
.kjnav > div:nth-child(4){
background:#ac0000;
}
@media (width:360px){
.kjnav > div:nth-child(2) > div:nth-child(1n+3){
height:80px !important;
}
}
@media (width:240px){
.kjnav > div:nth-child(2) > div:nth-child(1n+3){
height:80px !important;
}
}
</style>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
</head>
<body>
<div class="header"> <span class="logo"><img src="1_06.png" /></span> <span class="nav"><img src="1_03.png" /></span> </div>
<div class="logreg"><span class="logbtn">登陆</span><span class="regbtn">注册</span></div>
<div class="banner"> <img src="1_09.png" /> </div>
<div class="kjnav">
<div><span>四网联合</span></div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div></div>
<div></div>
</div>
<script type="text/javascript">
var wid = $("body").width(); //获取网页可见宽度
var oldwid = 640; //原图宽度
function setcss($obj,data){
//alert(attr+' '+val+' '+(44/oldwid));
$obj.css(data);
}
function cssval(val,$obj){
//因为px没有小数 所以四舍五入取整
var val_tmp = val/oldwid*wid;
if($obj){
alert($obj.height());
}
return val_tmp;
}
function resetcss(){
wid = $("body").width(); //获取网页可见宽度
//设置header高度
setcss($("div.header"),{'height':cssval(105)});
//设置logo宽度 高度 距离顶部距离 距离左侧距离
setcss($("span.logo"),{'width':cssval(242),'height':cssval(63),'margin-top':cssval(19), 'margin-left':cssval(170)});
//设置nav宽度 高度 距离顶部距离 距离左侧距离
setcss($("span.nav"),{'width':cssval(76),'height':cssval(76),'margin-top':cssval(14), 'margin-left':cssval(468)});
//设置logreg高度
setcss($("div.logreg"),{'height':cssval(44),'line-height':cssval(44)+'px','font-size':cssval(24)});
//设置登录按钮样式
setcss($(".logbtn"),{'background-size':(cssval(23),cssval(21)),'background-position':('center','left'),'margin-left':cssval(26),'padding-left':cssval(32)});
//设置注册按钮样式
setcss($(".regbtn"),{'background-size':(cssval(23),cssval(21)),'background-position':('center','left'),'margin-left':cssval(25),'padding-left':cssval(35)});
//设置banner样式
setcss($(".banner"),{'height':cssval(303)});
//设置快捷导航样式
setcss($(".kjnav"),{'height':cssval(440),'margin-top':cssval(20),'width':cssval(620)});
//设置快捷导航全部子元素样式
setcss($(".kjnav > div:even"),{'width':cssval(310)});
setcss($(".kjnav > div:odd"),{'width':cssval(300),'margin-left':cssval(10)});
setcss($(".kjnav > div:lt(2)"),{'height':cssval(290)});
setcss($(".kjnav > div:gt(1)"),{'margin-top':cssval(10),'height':cssval(140)});
//设置快捷导航第一大块
setcss($(".kjnav > div:eq(0)"),{'background-size':cssval(148),'background-position':'center '+cssval(113)+'px','font-size':cssval(49.43)});
setcss($(".kjnav > div:eq(0) span"),{'margin-top':cssval(38-14),'display':'inline-block','padding':0});
//设置快捷导航第二大块
setcss($(".kjnav > div:eq(1) > div"),{'width':cssval(145),'height':cssval(140),'display':'block','float':'left'});
setcss($(".kjnav > div:eq(1) > div:even"),{'margin-right':cssval(10)});
setcss($(".kjnav > div:eq(1) > div:gt(1)"),{'margin-top':cssval(10)});
setcss($(".kjnav > div:eq(1) > div:eq(0)"),{'background-size':(cssval(78)+'px '+cssval(57)+'px'),'background-position':'center '+cssval(25)+'px'});
setcss($(".kjnav > div:eq(1) > div:eq(1)"),{'background-size':(cssval(64)+'px '+cssval(53)+'px'),'background-position':'center '+cssval(30)+'px'});
setcss($(".kjnav > div:eq(1) > div:eq(2)"),{'background-size':(cssval(51)+'px '+cssval(59)+'px'),'background-position':'center '+cssval(23)+'px'});
setcss($(".kjnav > div:eq(1) > div:eq(3)"),{'background-size':(cssval(60)+'px '+cssval(59)+'px'),'background-position':'center '+cssval(23)+'px'});
alert($(".kjnav > div:first").height() +' '+ $(".kjnav > div:eq(1)").height()+' '+$(".kjnav > div:eq(1) > div:eq(0)").height()+' '+cssval(10)+' '+$("body").width());
}
$(function(){
resetcss()
$(window).resize(function(){
resetcss();
})
})
</script>
</body>
</html>