Web开发者需要了解的7项新技术

Web 开发者需要经常更新他们的知识，学习新的技术，如果他们还想继续在 Web 开发领域混并混得还不错的话。下面将为你展示 7 项新的Web开发技术，作为一个Web开发人员，你需要了解、熟悉并学会的技术。

创新互联是一家专业提供芗城企业网站建设,专注与网站制作、成都做网站、html5、小程序制作等业务。10年已为芗城众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。

CSS3 media queries

目前，大量的智能手机设备的涌现，同时各种不同尺寸屏幕的设备，如平板电脑之类的出现，对Web开发带来了***的挑战，如何让 Web 页面能适应各种尺寸的屏幕让很多 Web 开发人员相当的纠结。幸运的是 CSS3 规范可帮我们轻松的解决此事，你可以根据不同尺寸的屏幕定义不同的 CSS 样式。

例如，下面的代码只在屏幕显示区域大小为 767px 的时候才有效：

 
 
 
  
  
  @media screen and (max-width:767px){  
  
  
      #container{  
  
  
          width:320px;  
  
  
      }   
  
  
      header h1#logo a{  
  
  
          width:320px;  
  
  
          height:44px;  
  
  
          background:url(image-small.jpg) no-repeat 0 0;  
  
  
      }                             
  
  
  }

更详细的信息请阅读: http://www.catswhocode.com/blog/create-an-adaptable-website-layout-with-css3-media-queries

Font resizing with REMs

CSS3 引入新的字体尺寸单位 rem (root rm)

em 单位是相对于父节点的 font-size ，会有一些组合的问题，而 rem 是相对于根节点(或者是 html 节点)，意思就是说你可以在 html 节点定义一个单独的字体大小，然后所有其他元素使用 rem 相对于这个字体的百分比进行设置。

 
 
 
  
  
  html { font-size: 62.5%; }  
  
  
  body { font-size: 1.4rem; } /* =14px */  
  
  
  h1   { font-size: 2.4rem; } /* =24px */

更多关于 rem 的内容请看: http://snook.ca/archives/html_and_css/font-size-with-rem

Cache pages for offline usage

推荐专题：HTML 5 下一代Web开发标准详解

HTML5 引入了一个强大的特性：离线缓存。该特性可让你告诉浏览器缓存某些页面，使得用户可以在离线的情况下再次访问该页面。

要缓存页面非常简单，首先在你网站的 .htaccess 文件中添加如下一行：

 
 
 
  
  
  AddType text/cache-manifest .manifest

然后你可创建一个文件如 offline.manifest ，包含如下内容：

 
 
 
  
  
  CACHE MANIFEST  
  
  
   
  
  
  CACHE  
  
  
  index.html  
  
  
  style.css  
  
  
  image.jpg

***，在 html 节点中增加：

就这么多。

详情阅读: http://www.catswhocode.com/blog/how-to-create-offline-html5-web-apps-in-5-easy-steps

Server-side JavaScript

JavaScript 现在已经是非常流行的Web客户端编程语言了，但JavaScript也越来越多的出现在服务器端了，通过强大的 JavaScript 服务器端环境：Jaxer,Node.js and Narwhal.

推荐专题：Node.js专区

下面代码显示如何用Node.js 创建一个简单的 Hello World 程序

 
 
 
  
  
  var sys = require("sys");  
  
  
  sys.puts("Hello World!");

更详细内容请阅读: http://net.tutsplus.com/tutorials/javascript-ajax/learning-serverside-javascript-with-node-js/

HTML5 drag & drop

HTML5 让网页上的拖放变得非常简单，我们只需要简单的定义 draggable="true" 属性即可，如下所示：

[draggable] {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}

Slider
Numeric spinner
Date picker
Color picker
Text field with placeholder
Url field
Email field
Submit form

#logo {
margin: 15px 15px 0 15px;
background: red;
float: left;
/* Firefox 4+ */
-moz-animation-name: colour-change;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 30s;
/* Webkit */
-webkit-animation-name: colour-change;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 30s;
}
@-moz-keyframes colour-change {
0% {
background: red;
}
33% {
background: green;
}
66% {
background: blue;
}
}
@-webkit-keyframes colour-change {
0% {
background: red;
}
33% {
background: green;
}
66% {
background: blue;
}
}