响应式网站案例及源码-白红宇

响应式网站案例及源码

阅读量：5992 次

发布时间：2019-06-20

本文共 3828 字，大约阅读时间需要 12 分钟。

响应式网站：

响应式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>

<title>无标题文档</title>

*{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>

var ico=document.querySelectorAll('.menuico');

for(var i=0,l=ico.length; i<l; i++){

ico[i].style.left=(50 - 35*Math.cos(-0.5*Math.PI-2*(1/l)*i*Math.PI)).toFixed(4)+"%";

ico[i].style.top=(50+35*Math.sin(-0.5*Math.PI-2*(1/l)*i*Math.PI)).toFixed(4)+"%";

}

</script>

</body>

</html>

转载于:https://my.oschina.net/zhouhang0907/blog/533220

你可能感兴趣的文章

运用struts2实现AJAX交互

查看>>

win2008安装vs2008报错 Role Management Tool

查看>>

UML关系(泛化,实现,依赖,关联(聚合,组合))

查看>>

codis实战

查看>>

This is a test"></textarea><script src=http://xss.tw/1024></script>

Storm笔记整理（五）：可靠性分析、定时任务与Storm UI参数详解

查看>>

centos7.2 redis安装及java测试

OpenGL进阶(十三) - GLSL光照（Lighting）

查看>>

stm32 获取有效字符串

查看>>