基于HTML5+Css3的响应式网站建设开发

随着互联网技术的快速发展，HTML5+CSS3已经成为主流的Web前端开发技术。与以前的HTML+CSS相比，
HTML5的新元素、语义标签和属性，加上CSS3丰富的渲染效果，可以让开发者非常方便、快捷、灵活地实现网页的前端开发和响应。
网站建设有几个需要注意的地方:

开发响应式网站有几点需要注意。

第一点:在网页代码的头部加一行viewport meta。
标签。

& ltmeta name = & quot视窗& quotcontent = & quot宽度=设备宽度，初始比例= 1 & quot/& gt；

视口是
网页的默认宽度和高度，这意味着默认情况下网页的宽度等于屏幕宽度(width=device-width)，原始缩放比例(initial-scale=1)为
1.0，即网页初始大小占屏幕面积的100%。

第二点:(注意)不要用绝对宽度和字体大小。

宽度:自动；/宽度:XX %；第三
点:(注意)字体大小字体大小是默认页面大小的100%，也就是16像素的字体不要用绝对大小“PX & quot使用相对尺寸“REM”
html { font-size:62.5%；}body {font:normal 100% Arial，无衬线；字体大小:14px字体大小:1.4红色；}

接下来，我们介绍
介绍html5和css3。

一. HTML5

HTML5是HTML的下一代。HTML5是开放网络平台的基石，该平台旨在支持移动设备上的多媒体。它的新语法很特别。
标志被引入来支持这一点，如画布，视频和音频标签。HTML5还引入了最新的功能，可以改变用户与文档的交互方式。HTML5的优势包括:

具有很强的可移植性；

改良的
用户体验和可用性；

HTML5将广泛应用于游戏和移动应用；

对SEO友好；

提高
添加新标签有助于定义重要内容；

可以很好的替代FLASH和Silverlight；

可以给网站带来更多的音频和视频。
多媒体元素。

第二，CSS3

CSS3是CSS(层叠样式表)技术的升级版本，CSS发展的一个主要变化是W3C决定
CSS3分为一系列模块。CSS3有许多新功能，如圆角效果、图形边界、块阴影和文本阴影、带有RGBA的透明效果、渐变效果以及。
@FontFace实现了自定义字体、多背景图片、文本或图片变形处理(旋转、缩放、倾斜和移动)、多栏布局、媒体查询等。

第三，页面
适应性问题

与电脑终端相比，移动终端的分辨率和屏幕尺寸是不同的。如果移动终端仍然将最大屏幕尺寸设计为与计算机终端相同。
如果一英寸的大小是1024像素，电脑端的字体大小设计为12像素或者14像素，那么就会出错。所以在设计移动终端网页的时候，最好让网页的宽度自给自足。
适配屏幕，万维网联盟在设计html时已经充分考虑到了这一点，我们只需要添加标签即可。

第四，画面适应性的问题

图片分为背景图片和通过标签介绍的图片。前者可以通过媒体介绍。
查询自动切换不同分辨率的版本，但不支持背景图像。
在大小浏览器中，背景图像不能连续调整大小(即在媒体中
Query在切换css的点上可以换一张不同分辨率的图片，但是不能得到两个中等分辨率的版本)，在很多情况下不适合使用(比如cms)
现场图片。

通过标签引入的图片，要用延迟加载图片的方法，也就是说，在实际加载图片之前，先用js检查一下什么时候。
前屏幕的宽度，然后页面加载不同分辨率的图片。如果屏幕宽度小于或等于480，则加载宽度为80像素的图片。如果屏幕宽度大于480并小于或等于768，
然后加载一张120像素的图片，如果屏幕宽度大于768，加载一张160像素的图片，如果屏幕宽度是600像素，那么你需要按百分比缩放120像素的图片。
件来达到合适的效果。对于移动设备来说，这种处理方式降低了加载图片的大小和网页浏览的速度，但是在竖屏和横屏之间的转换，或者浏览器的扩展。
图片放大后会模糊。如果这个问题解决了呢？我们认为对图片的考虑应该从网页布局设计开始，避免每个窗口中图片的宽度。
浏览器大小不要相差太大，多安排一些内容，而不是通过扩大图片大小来填补浏览器窗口扩大带来的空空间。

比如:搬家
设备图片适配的Css代码:

img { maxwidth:100%；高度:自动；宽度:自动；}
动词 （verb的缩写）航行适应性

如何让导航适应屏幕的大小，如何让它适应的更简单，是我们研究的一个难点。
与jQuery相比，我们发现使用jQuery自适应窗口大小来设置导航菜单更简单。

例如:

。nav { line height:50px；背景:# 0099cc位置:相对；}
。导航Li { float:left；}
。导航阿利{显示:块；填充:0 20px颜色:# 00C}
. nav span . navon { display:none；宽度:20px位置:绝对；top:12px；右:12px光标:指针；}
@媒体屏幕和(最大宽度:768像素)
{
。导航ul {显示:无；宽度:100%；
}