响应式布局

响应式布局：响应式布局，流体布局，自适应布局，静态布局等等，这是移动设备的飞速发展，前端人员不得不跟上潮流的一个方向。实际上各种设备尺寸，分辨率大都不同，真的适应各种设备依旧是不现实的，首先是浏览器差异化，让我们去hack（由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack），现在是终端问题，让我展现出不同的设备不同的样式，折腾来折腾去，终于我们走进了热火朝天的响应式布局。

1. 媒体类型：我们使用计算机和手机的是screen
   • all 所有媒体
   • braille 盲文触觉设备
   • embossed 盲文打印机
   • print 手持设备
   • projection 打印预览
   • screen 彩屏设备
   • speech '听觉'类似的媒体类型
   • tty 不适用像素的设备
   • tv 电视
2. 关键字：and——并且；not——not关键字是用来排除某种制定的媒体类型；only——only用来定某种特定的媒体类型
3. 媒体特性：(max-width:600px)；(max-device-width: 480px)设备输出宽度；(orientation:portrait)竖屏；(orientation:landscape)横屏
   (-webkit-min-device-pixel-ratio: 2) 像素比；devicePixelRatio 设备像素比 window.devicePixelRatio = 物理像素 / dips 即实际像素和表现像素
4. 样式引入和媒体查询的书写：

       <link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />
       @import url("css/reset.css") screen;
       @media screen{
       	选择器{ 属性：属性值；}
       }
       
       <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">  竖屏
       <link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css">  横屏
       @media screen and (min-width:400px) and (max-width:500px) {.box {margin: 0 auto;}}
       
       <link rel="stylesheet" type="text/css" href="styleA.css"  media="screen and (min-width: 800px)">
       <link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
       <link rel="stylesheet" type="text/css" href="styleC.css"    media="screen and (max-width: 600px)">

自定义文字：将矢量画转成文字模式

1. 格式

       @font-face {
           font-family: 'zhuoyue';
           src: url('111-webfont.eot');
           src: url('111-webfont.eot?#iefix') format('embedded-opentype'),
                url('111-webfont.woff') format('woff'),
                url('111-webfont.ttf') format('truetype'),
                url('111-webfont.svg#untitledregular') format('svg');
           font-weight: normal;
           font-style: normal;
       }

2. 转换字体格式生成兼容代码http://www.fontsquirrel.com/fontface/generator
3. 图标使用实例：奥森图标（css），阿里巴巴矢量图标库（png，svg）