响应式⽹站案例及源码
响应式⽹站：
响应式Web设计(Responsive Web design)的理念是：页⾯的设计与开发应当根据⽤户⾏为以及设备环境(系统平台、屏幕尺⼨、屏幕定向等)进⾏相应的响应和调整。具体的实践⽅式由多⽅⾯组成，包括弹性⽹格和布局、图⽚、CSS media query的使⽤等。⽆论⽤户正在使⽤笔记本还是iPad，我们的页⾯都应该能够⾃动切换分辨率、图⽚尺⼨及相关脚本功能等，以适应不同设备；换句话说，页⾯应该有能⼒去⾃动响应⽤户的设备环境。响应式⽹页设计就是⼀个⽹站能够兼容多个终端——⽽不是为每个终端做⼀个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。
⼀切弹性化：
我们通过响应式的设计和开发思路让页⾯更加"弹性"了。图⽚的尺⼨可以被⾃动调整，页⾯布局再不会被破坏。虽然永远没有最完美的解决⽅案，但它给了我们更多选择。⽆论⽤户切换设备的屏幕定向⽅式，还是从台式机屏幕转到iPad上浏览，页⾯都会真正的富有弹性。通过液态⽹格和液态图⽚技术，并且在正确的地⽅使⽤了正确的标记。
响应式图⽚：
响应式图⽚技术思想：不仅要同⽐的缩放图⽚，还要在⼩设备上降低图⽚⾃⾝的分辨率。这个技术的实现需要使⽤⼏个相关⽂件，我们可以在Github上获取。包括⼀个JavaScript⽂件(rwd-images.js)，⼀个.htaccess⽂件，以及⼀些范例资源⽂件。⼤致的原理
是，rwd-images.js会检测当前设备的屏幕分辨率，如果是⼤屏幕设备，则向页⾯head部分中添加BASE标记，并将后续的图⽚、脚本和样式表加载请求定向到⼀个虚拟路径"/rwd-router"。当这些请求到达服务器端，.htacces⽂件会决定这些请求所需要的是原始图⽚还是⼩尺⼨的"响应式图⽚"，并进⾏相应的反馈输出。对于⼩屏幕的移动设备，原始尺⼨的⼤图⽚永远不会被⽤到。
源代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>⽆标题⽂档</title>
<style type="text/css">
*{margin:0; padding:0}
body{background:url(img/bj.jpg) no-repeat fixed; background-size:cover;}
#nav #logo{background:rgba(255,255,255,0.3) url("img/logo.png")center no-repeat; width:80px; height:80px; display:block; position:absolute; top:0px; left:50px; border:2px solid #FFF; border-radius:40px; z-index:999;}
#nav #ring a:nth-child(1){background:rgba(255,255,255,1) url("img/1_28.png")top no-repeat;}
#nav #ring a:nth-child(2){background:rgba(255,255,255,1) url("img/1_29.png")top no-repeat;}
#nav #ring a:nth-child(3){background:rgba(255,255,255,1) url("img/1_30.png")top no-repeat;}
#nav #ring a:nth-child(4){background:rgba(255,255,255,1) url("img/1_31.png")top no-repeat;}
#nav #ring a:nth-child(5){background:rgba(255,255,255,1) url("img/1_32.png")top no-repeat;}
#nav #ring a:nth-child(6){background:rgba(255,255,255,1) url("img/1_33.png")top no-repeat;}
#nav #ring a:nth-child(7){background:rgba(255,255,255,1) url("img/1_34.png")top no-repeat;}
#nav #ring a:nth-child(8){background:rgba(255,255,255,1) url("img/1_35.png")top no-repeat;}
@media screen and (min-width:880px){
#nav{width:100%; height:70px;}
#nav #logo{position:absolute; top:0px; left:50px;}
#nav #ring{width:860px; height:70px; background:#FFF; position:relative; margin:0px auto;}
#nav #ring a{display:inline-block;/*⾏内快级元素 并排展⽰*/ width:100px; height:40px; margin:15px 0px;}
}
@media screen and (max-width:880px){
#nav{width:256px; height:256px; border-radius:50%; position:fixed; bottom:10px; left:10px;}
#nav #ring{width:256px; height:256px; background:rgba(0,0,0,0.4); position:relative; margin:0px auto; border-radius:50%;}
#nav #logo{position:absolute; bottom:10px; left:10px; top:0px; right:0px; margin:auto;}
#nav #ring{transform:scale(0.1) rotate(-270deg);/*将8⼩盒⼦缩⼩为0.1倍，同时改变⾓度为-270*/ opacity:0; transition:all 500ms ease-out;/*过渡将改变的元素变化过程所发⽣时间变长*/}
#nav #ring a{ display:block; width:40px; height:40px; border-radius:20px; position:absolute;/*按照圆排列*/ margin-left:-20px; margin-top:-
20px;}
#nav:hover #ring{ transform:scale(1) rotate(360deg); opacity:1;}
}
</style>
</head>
<body>
<div id="nav">
<a href="www.baidu" id="logo"></a>
<div id="ring">
<a href="www.baidu" class="menuico"></a>
<a href="www.baidu" class="menuico"></a>
<a href="www.baidu" class="menuico"></a>
404页面网站源码<a href="www.baidu" class="menuico"></a>
<a href="www.baidu" class="menuico"></a>
<a href="www.baidu" class="menuico"></a>
<a href="www.baidu" class="menuico"></a>
<a href="www.baidu" class="menuico"></a>
</div>
</div>
<script type="text/javascript">
var ico=document.querySelectorAll('.menuico');
for(var i=0,l=ico.length; i<l; i++){
ico[i].style.left=(50 - s(-0.5*Math.PI-2*(1/l)*i*Math.PI)).toFixed(4)+"%"; ico[i].p=(50+35*Math.sin(-0.5*Math.PI-2*(1/l)*i*Math.PI)).toFixed(4)+"%"; }
</script>
</body>
</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论