网站建设资讯

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

随着互联网技术的高速发展，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。


一、 HTML5

HTML5是下一代的HTML。HTML5是开放的Web网络平台的奠基石，HTML5的设计目的是为了在移动设备上支持多媒体，其新的语法特 征被引进以支持这一点，比如canvas、video和audio标签。HTML5还引进了最新的功能，能够改变用户与文档的交互方式。HTML5的优点包括：

具有强大的可移植性；

提高了 用户体验和可用性；

HTML5将被大量的应用在游戏和移动应用程序；

对SEO比较友好；

增 加的新标签有助于定义重要内容；

能很好的替代FLASH和Silverlight；

能给站点带来更多的音频和视频等 多媒体元素。

二、 CSS3

CSS3是CSS（层叠样式表）技术的升级版本，CSS演进的一个主要变化就是W3C决定将 CSS3分成一系列模块。CSS3的新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用 @FontFace实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等。

三、 页面 适应性问题

移动终端与电脑端比较，分辨率和屏幕尺寸都不相同，如果在移动端还是把最大屏幕尺寸设计成和电脑端最大屏幕尺 寸一样的比如1024像素，字体大小还设计成电脑端的12像素或者14像素，那么就会出错，因此，在设计移动终端网页时，最好让网页的宽度自 适应于屏幕，万维网联盟在设计html的时候充分考虑到了这点，我们只需要加上标签就可以。

四、 图片适应性问题

图片分为背景图片和通过标签引入的图片，前者可以通过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；}

五、 导航适应性问题

导航如何能够适应屏幕的大小，怎样适应能够更简单是我们研究的一个难点，通过多种方法的对 比，我们发现采用jQuery自适应窗口大小设置导航菜单的方式比较简单。

例如：

.nav{lineheight：50px；background： #0099cc；position： relative；}
.nav li{float：left；}
.nav li a{display：block；padding：0 20px；color： #00C；}
.navspan.navon{display：none；width：20px；position： absolute；top：12px；right：12px；cursor： pointer；}
@media screen and （maxwidth：768px）
{
.nav ul{display：none；width：100%；
}
关于本文章作者的说明： 27434数字网络工作室专注于提供一站式的网站软件开发服务！您将获得前沿的技术支持和专业的开发团队，欢迎与本站的技术客服人员做专业的交流沟通。