Percy

how to make a Responsive Web Design Page

如何设计一个自适应的网页

自适应的初衷

如今用户访问网页的设备越来多,各种尺寸的手机,平板,电脑,等等,前端同学面临一个问题:如何让同一个网页在不同大小的设备上兼容得比较好,呈现出一个比较友好的交互界面呢?于是乎聪明的人类发明了自适应这种方式来编写前端页面。

抛砖引玉

本博客每篇文章底部的“打赏”功能,点击”赏”之后,会弹出微信打赏的二维码,聪明的你肯定发现无论是用手机还是电脑访问此博客,这个打赏二维码始终出现在屏幕最中间,无论怎么改变屏幕大小,也始终是在最中间。那么这个是怎么做到的呢?

整体思路

当你访问这个页面的时候,Javascript先取了访问当前页面的浏览器窗口的宽度,再根据得到的宽度去计算二维码的left值(左边距)。然后重新给二维码的left属性赋值。以后每次浏览器大小发生改变的时候,都去触发这一个计算赋值过程即可。大功告成,对,你没有看错,思路就是这么简单。
具体公式:left=浏览器宽度/2 - 二维码宽度/2

demo

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--打赏-->
<div style="position: fixed;z-index: 19891016;top: 150px;left: 553px;background-color: #000;z-index: 19891018;" id="dashangQr" class="dashangQr hide"><img src="http://7xl7zf.com1.z0.glb.clouddn.com/dashang.png"></div>
// 自适应
function self_adaption() {
// 自适应宽度
var window_width = $(window).width();
window_width = (window_width/2-120) +'px';
document.getElementById('dashangQr').style.left = window_width;
// 自适应高度
var window_height = $(window).height();
window_height = (window_height/2-135) +'px';
document.getElementById('dashangQr').style.top = window_height;
}

关于自适应的更详细blog


现在是北京时间凌晨两点,今天是愚人节.