伴随网络技术的飞速发展，HTML5+CSS3已成为现在比较主流的Web前端开发技术，其与以往的HTML+CSS相比，HTML5的新元素、语义化标签与属性，再加上CSS3的丰富的渲染成效，可以使开发者极为便捷、迅速、灵活地达成web页面的前端开发，响应式网站制作有几个地方应该注意：
开发响应式网站有几个地方应该注意
第一点：在网页代码的头部，加入一行viewport元标签.
meta name=viewport content=width=device-width, initial-scale=1 /
viewport是网页默认的宽度和高度，上面这行代码的意思是：网页宽度默认等于屏幕宽度（width=device-width），原始缩放比率（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
第二点：（注意）不用绝对宽度，字体大小
width:auto; / width:XX%;第三点：（注意）字体大小字体大小是页面默认大小的100%，即16像素字体不要用绝对大小PX，要用相对大小“REM”html{font-size:62.5%;}body {font:normal 100% Arial,sans-serif;font-size:14px; font-size:1.4rem; }
下面大家介绍一下html5和css3。
1、 HTML5
HTML5是下一代的HTML。HTML5是开放的Web互联网平台的奠基石，HTML5的设计目的是为了在手机上支持多媒体，其新的语法特点被引进以支持这一点，譬如canvas、video和audio标签。HTML5还引进了最新的功能，可以改变用户与文档的交互方法。HTML5的优点包含：
具备强大的可移植性；
提升了客户体验和可用性；
HTML5将被很多的应用在游戏和移动应用程序；
对网站优化比较友好；
增加的新标签能够帮助概念要紧内容；
能非常不错的替代FLASH和Silverlight；
能给站点带来更多的音频和视频等多媒体元素。
2、 CSS3
CSS3是CSS（层叠样式表）技术的升级版本，CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。CSS3的新特点有不少，比如圆角成效、图形化边界、块阴影与文字阴影、用RGBA达成透明成效、渐变成效、用@FontFace达成定制字体、多背景图、文字或图像的变形处置（旋转、缩放、倾斜、移动）、多栏布局、媒体查看等。
3、 页面适应性问题
移动终端与PC端比较，分辨率和屏幕尺寸都不相同，假如在手机端还是把最大屏幕尺寸设计成和PC端最大屏幕尺寸一样的譬如1024像素，字体大小还设计成PC端的12像素或者14像素，那样就会出错，因此，在设计移动终端网页时，最好让网页的宽度自适应于屏幕，万维网网盟在设计html的时候充分考虑到了这点，大家仅需加上标签就能。
4、 图片适应性问题
图片分为背景图片和通过标签引入的图片，前者可以通过media query自动的切换不同分辨率的版本，但在不支持background image size的浏览器中背景图片没办法无级地调整大小（也就是在media query切换css的点上可以换一张不同分辨率的图，但没法获得两张分辨率中间大小的版本），而且在不少状况下（譬如cms中）并不合适用背景图片。
通过标签引入的图片，大家要用延迟加载图片的办法来加载图片，也就是说在实质加载图片之前，第一要用js检查目前屏幕的宽度，然后页面加载不同分辨率的图片，如屏幕宽度小于等于480，那样就加载80像素宽度的图片，如屏幕宽度大于480小于等于768，那样就加载120像素的图片，假如屏幕宽度大于768则加载160像素的图片，假如屏幕宽度是600像素，那样就需要通过百分比来缩放120像素的图片来达到适合的成效。这种处置方法对于手机来讲加载的图片变小了，网页浏览速度也减小了，但在竖屏和横屏的转换，或者浏览器扩大时图片会因为放大而产生模糊问题，这个问题假如解决呢？大家觉得对于图片的考虑应该从网站布局设计的开始就应防止图片在各窗口宽度下的尺寸相差不要太大，要排列更多的内容，而不可以通过扩大图片尺寸来填充因为浏览器窗口的扩大而带来的空间。
比如：手机图片自适应的css代码：
img{maxwidth：100%；height：auto；width：auto；}5、 导航适应性问题
导航怎么才能适应屏幕的大小，如何适应可以更简单是大家研究的一个难题，通过多种办法的对比，大家发现使用jQuery自适应窗口大小设置导航菜单的方法比较简单。
比如：
.nav{lineheight：50px；background：#0099cc；position：relative；}.navli{float：left；}.navlia{display：block；padding：020px；color：#00C；}.navspan.navon{display：none；width：20px；position：absolute；TOP：12px；right：12px；cursor：pointer；}@mediascreenand（maxwidth：768px）{.navul{display：none；width：100%；}
