HTML5 制作响应式网页,首先需要考虑是全平台适配还是只是移动端适配。这里以移动端响应式网站为例,讲述如何制作响应式网页。
1、选定基本设计尺寸,一般以1080为基准。确定响应式web设计的应用场景之后,和美工(或设计师)沟通,之前,一般需要美工出几套主流移动设备屏幕分辨率的设计图,现在,使用流式布局以及rem等可以使用一套设计图,以最常用的移动设备屏幕分辨率为基准。
2、当美工完成设计图之后,前端工程师的工作就开始了。这时你就可以使用PS或是FW进行切图了。一般说来,Fireworks cs6切图更快,但是Fireworks有时会有图片失真的情况发生,所以,有时需要使用PS进行配合,PS有切片工具可以专门用来切图。
具体代码:
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth
if (!clientWidth) return
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'
}
关于HTML5的解释简要如下:1、HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准,以期能在互联网应用迅速发展的时候,使网络标准达到符合当代的网络需求。广义论及HTML5时,实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务(Plug-in-Based Rich Internet Application,RIA),例如:Adobe Flash、Microsoft Silverlight与Oracle JavaFX的需求,并且提供更多能有效加强网络应用的标准集。
2、具体来说,HTML5添加了许多新的语法特征,其中包括<video>、<audio>和<canvas>元素,同时集成了SVG内容。这些元素是为了更容易的在网页中添加和处理多媒体和图片内容而添加的。其它新的元素如<section>、<article>、<header>和<nav>则是为了丰富文档的数据内容。新的属性的添加也是为了同样的目的。同时也有一些属性和元素被移除掉了。一些元素,像<a>、<cite>和<menu>被修改,重新定义或标准化了。同时APIs和DOM已经成为HTML5中的基础部分了。HTML5还定义了处理非法文档的具体细节,使得所有浏览器和客户端程序能够一致地处理语法错误,ITJOB。
欢迎分享,转载请注明来源:夏雨云
评论列表(0条)