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

跟着互联网技巧的高速成长，HTML5+CSS3已成为今朝比拟主流的Web前端开辟技巧，其与以往的HTML+CSS比拟，HTML5的新元素、语义化标签以及属性，再加上CSS3的丰硕的衬着后果，可以或许使开辟者极为便利、快速、灵巧地实现web页面的前端开辟，响应式网站扶植有几个处所须要留意：

开辟响应式网站有几个处所须要留意

第一点：在网页代码的头部，参加一行viewport元标签.

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；}.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%；}