html5页面左右滑动实现动态响应布局

html5页面怎么实现左右滑动不换页

大家有没有想过，如何用html5来实现页面的左右自由滑动，而且还不跳转换页呢？其实这并不难，主要步骤如下：

要知道，这个滑动效果其实就是通过捕捉鼠标拖动事件，计算偏移量，再配合CSS位置改变实现的，真的是挺酷炫又实用的~如果想要手指滑动的话，手机端还得加上touch事件，别忘了！

网页做得再漂亮，如果不能适配手机和平板，那就尴尬了。所以说，怎么让HTML5页面自动适应各种设备尺寸，特别是电脑和手机呢？这里给大家几点超实用的方法：

利用viewport元标签
在HTML页面的<head>里加入一句：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">，
这句话的魔力是告诉浏览器页面宽度就是设备宽度，初始缩放比例为1，并且禁止用户放大缩小页面，保证页面不会乱套。
用百分比和媒体查询控制宽度
CSS里用百分比宽度来定义元素，比如width: 100%，更妙的是使用Media Queries，比如：
css @media only screen and (max-width: 449px) { /* 给手机屏幕用的样式 */ }
这样根据屏幕大小自动调用不同的CSS，大大增强页面适应性，手机、平板、电脑都能友好显示。
HTML5布局技巧
- 当元素没定义边框时，可以利用内边距（padding）调整空间效果。
- 注意外边距重叠的问题，外层间距和内层间距分清楚。
- 背景图像只能显示在内边距区域，外边距区域是透明的。
- 设计网页结构时，更多关注内容和功能，而不是仅仅追求表面效果，这样的页面才靠谱。
动态网页的制作和加载
- 用简单HTML代码写静态内容后，保存为.html文件即可。
- 想让页面动态一点，比如AJAX异步加载内容，可以绑定事件，触发时展示loading动画，完事后加载数据，体验感棒棒哒！
- HTML5结合JS和CSS，能轻松实现动态页面且响应式布局。