响应式网站在加载图片时，能自动识别智能终端图片，根据浏览设备做到自动加载响应图片平均节省图片流量80%以上，下载速度更是可以提高5倍以上，网络响应高速，搜索引擎更喜欢2兼容所有上网设备，统一管理H5响应式网站可以兼容。

编写HTML和CSS代码使用文本编辑器如Sublime TextVisual Studio Code等编写HTML和CSS代码HTML负责页面结构和内容，CSS则负责页面的样式和布局添加交互效果利用JavaScript和CSS3等技术为网页添加交互效果可以使用jQuer。

如何设计响应式布局说到响应式布局，就不得不提到CSS3中的MediaQuery媒体查询是个好东西，好用，功能强大，速度快媒体查询是做出回应式布局的利器使用这个工具，我们可以非常方便快捷地制作出各种丰富实用的界面。

具体代码function doc， win var docEl = docdocumentElement，resizeEvt = #39orientationchange#39 in window ？ #39orientationchange#39 #39resize#39，recalc = function var clientWidth = docElclientWidthif ！clie。

首先你得学会HTML5CSS3javascript三个最基本的技术学会后，可以采用bootstrap这种前端开发框架来进行网页设计。

HTML5是无法做这个事情的准确点说应该是用CSS的响应式布局这个东西你可以去看一下bootstrap，这个前端框架就是大量利用了这个技术。

响应式布局最简单的就是用css3来实现我举一个最简单的例子下面是html代码lt！DOCTYPE html lthtml lang=quotenquot lthead ltmeta charset=quotUTF8quot ltmeta name =quotviewportquot content=quotwidth = devicewidth，initial。

原理在CSS中，有一个不常用到的属性media为了达到响应式设计的目的，让css根据屏幕宽度例如 media screen only @maxwidth480px，使用不同的CSS代码，从而达到自动调整页面DIV宽度的目的当然，除了CSS，还可以。