基于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。

1.jpg

一、 HTML5

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

  1. 具有强大的可移植性;

  2. 提高了用户体验和可用性;

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

  4. 对SEO比较友好;

  5. 增加的新标签有助于定义重要内容;

  6. 能很好的替代FLASH和Silverlight;

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

二、 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%;
}
相关文档
03 2019-02
如何创建网站?网站建设基本流程详解 在互联网+时代,各行各业为了适应时代的发展,纷纷在线上来开展开展和宣传自己的业务,若想让更多人了解自己的产品或服务,创建一个自己的网站至关重要。网站不仅可以详细介绍企业信息,更重要的,能够获取不少潜在客户,有利于品牌宣传和推广。但是很多用户
03 2019-02
建立网站的前期规划 信息化时代,企业或个人为了更好的推广自己的产品或个人最好的方法就是建立自己的网站,在网站上可以通过文字、图片、视频等多种方式介绍和推广自己。今天由我们介绍下网站建设的一些方案设计思路和注意事项。一、建立网站的目的所有的网站都有他的目的性和目
03 2019-02
签订网站制作合同时的注意事项 网站制作合同即需要建设网站的企业或个人委托他人进行网站制作而签订的合同。网站制作合同可能包含的内容有网站策划、网页设计、网站功能、网站优化技术、网站内容整理、网站推广、网站评估、网站运营、网站整体优化、网站改版等。网站制作合同签订注意事项一
02 2019-02
企业网站建设要点 网站建设的发展飞快,企业、政府、学校、门户网站建设的市场更是迎来了一个春天。企业是否拥有属于自己的网站变得尤其重要。企业网站作为公司的一个网络形象,各方面都要重视尽可能做到最好,因为网站建设的好与坏直接影响企业在网络销售上的发展。网站建设方
02 2019-02
自助建站系统的优势 现在网络上有形形色色的企业网站站,选择自助建站的客户比较多。自助建站系统的好处就在于客户可以根据企业的实际情况进行网站设计开发。打造企业的品牌形象,个性鲜明的网站风格更能给用户留下深刻的印象,从而能够更好的进⾏企业宣传,在网络上获取更多有价
02 2019-02
网站开发流程 创建一个企业形象网站,要做好商业网站开发的前期准备、中期制作和后期的测试发布工作。前期准备包括了解网站的业务背景、明确网站的设计风格、确定网站内容等;中期制作主要包括创建站点、制作首页、制作模板和制作样式;后期的测试发布工作包括检查页面效果
02 2019-02
新手如何学习网站建设,教你如何制作网站 新手开发网站具备的条件:对电脑熟练操作,使用电脑最好在一年以上,会打字,懂基本电脑知识,这个对现在的人来说都不成问题的。第一阶段:开始时最好是学些网页编辑软件和基础网页脚本语法,如:Dreamweaver软件,HTML语法(百度一下:HTM
02 2019-02
网站建设方案 一、网站目标网络凭借其卓越的互动性与便捷的交流手段正成为最有发展潜力与前途的新兴媒体,成为众企业倍为关注的宣传热点。许多行业的知名企业已经通过网站建设来为自己的企业带来显著的宣传效果。企业网站为对外宣传、服务和交流的载体,来配合企业的迅速发