上海一年

不知不觉,在上海已经待了整整一年。

前端工具bower wiredep

bower wiredep gulp

Bower是一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。

详细信息请参考bower官网

几个例子:

1.当前项目需要引入jquery

bower install jquery  

只需上面简单一条命令就可以将jquery库已经其依赖的库下载下来。直接就可以在项目中引用相关的文件就可以了。

2.使用bower.json

{
  "name": "bower demo",
  "version": "2.9.0",
  "homepage": "",
  "authors": [
    "xiaopeng <lost1q84@

CSS transform 3d

css

CSS transform 3d 翻译过来就是3d变换。

先从最简单的rotate说起。

rotateX 绕X轴旋转。

rotateY 绕Y轴旋转。

rotateZ 绕X轴旋转。

写不下去了,perspective, perspective-origin, transform-style, backface-visibility 请参考以下几篇文章:

  1. CSS-Tricks perspective
  2. CSS-Tricks perspective-origin
  3. CSS-Tricks transform-style
  4. 好吧,CSS3 3D transform变换,不过如此!

CSS media query

css

在 CSS2 中通过media type(媒体类型) 可以针对不同的设备设置不同的css样式。CSS3中的media query(媒体查询)是对 media type (媒体类型) 的一种增强。media query包含了一个媒体类型和至少一个使用如宽度、高度和颜色等媒体属性来限制样式表范围的表达式。media query可以看成是media type + CSS属性判断。通过media query可以构建适应各种屏幕尺寸的响应式布局。

在html中使用

<link media="screen and (max-width:

viewport meta 标签

viewport

手机浏览器在渲染网页时,一般会采用一个比手机屏幕更宽的虚拟的窗口(viewport)中渲染页面。这样做的目的主要是解决电脑网页在手机上压缩进一个小屏幕导致难于浏览和使用的问题。手机上Safari引入“viewport元标签“来让web开发者控制视口的尺寸及比例。

 <meta name="viewport" content="
    height = [ pixel_value |device-height] , 
    width = [ pixel_value |device-width ] , 
    initial-scale = float_value , 
    minimum-scale = float_value , 
    maximum-scale = float_