移动web开发笔记

移动web开发笔记

参考：
移动web开发入门
移动端web开发技巧

基础概念

像素单位

CSS pixels与device pixels CSS pixels

浏览器使用的抽象单位， 主要用来在网页上绘制内容。 device pixels： 显示屏幕的的最小物理单位，每个dp包含自己的颜色、亮度。 等值的 CSS pixels在手机屏幕上占多大的位置，这不是固定的，这取决于很多属性。经过分析和总结，我们可以得出这么一条公式：
1 CSS pixels = （devicePixelRatio）^2 device pixels
（^2是平方的意思，至于 devicePixelRatio是什么东西，后面会讲解） 。

PPI/DPI

PPI，有时也叫DPI，所表示的是每英寸所拥有的像素（pixel）数目，数值越高，即代表显示屏能够以越高的密度显示图像。（注：这里的像素，指的是device pixels。）搞清楚了PPI是什么意思，我们就能很容易理解PPI的计算方式了，我们需要首先算出手机屏幕的对角线等效像素，然后处以对角线（我们平常所说的手机屏幕尺寸就是说的手机屏幕对角线的长度），就可以得到PPI了。准确的计算公示大家可以参照下图。比较有意思的是，根据公式计算出来的iPhone 4的PPI为330，要比苹果官方公布的326要高一点点。

devicePiexelRatio

pixel - px ( picture element )

dpi / ppi - 每英寸像素 ( dot per inch )

dips - 设备独立像素 ( device-independent pixels )

devicePixelRatio - 物理像素 / dips 

文字大小控制

px, rem

固定大小 - px

多屏适配，统一修改 - rem
相对长度单位。相对于根元素(即html元素)font-size计算值的倍数

rem - font size of the root element (W3C)

viewport

参考：移动前端开发之viewport的深入理解

<meta name="viewport"
      content="width=device-width,
               height=device-height,
               inital-scale=1.0,
               maximum-scale=1.0,
               user-scalable=no;"
/>

在苹果的规范中，meta viewport 有6个属性，分别如下：
- width - viewport的宽度［pixel_value |device-width］
- height - viewport的高度［pixel_value |device-height］
- initial-scale - 初始的缩放比例[float_value]christer1229
- maximum-scale - 允许用户缩放到的最大比例
- minimum-scalbujue - 允许用户的最小缩放值
- user-scalable - 用户是否可以手动缩放 ［yes | no］

响应式布局

原则

• 移动优先
• 渐进增强

实现方式

• 媒体查询
• 使用JS
• 使用第三方框架

布局方案

百分比布局(流体布局)

将元素原本的定宽除父容器的宽度得到百分比设置为宽度，使用百分比，文字使用 em。

• 优点：
  流动布局页面对用户更友好，因为它能自适应用户的设置。
  页面周围的空白区域在所有分辨率和浏览器下都是相同的，在视觉上更美观。
  如果设计良好，流动布局可以避免在小分辨率下出现水平滚动条。
• 缺点：
  设计者更难控制用户所见，并可能忽略掉一些错误，因为在特定的分辨率下看起来好的；
  图片，视频以及其他设置了宽度的内容可能需要多种宽度以适应不同分辨率的用户；
  在特别大的分辨率下，内容会被拉成长长的一行，变得难以阅读；
  会有画面失真问题

弹性（flexible)布局

用rem替代px
原理：定一个最大宽度，设备屏幕超过这个宽度之后，rem大小不再变化，否则，rem大小设置为屏幕宽度的几分之一，页面中的长度单位值用rem代替px，这样随着页面的宽度变化能够进行等比例缩放。
rem实际是页面根元素的字体大小，通过js改变rem值的代码如下：

;
( function( win ) ) {
    var doc = win.document;
    var docEl = doc.documentElement;//获取文档元素
    var tid;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;//获取设备宽度
        if ( width > 540 ) {
            width = 540;
        }
        var rem = width / 10;//设置rem为屏幕宽度的十分之一
        docEl.style.fontSize = rem + 'px';
    }
    win.addEventListener('resize', function() {//屏幕宽度改变时
        clearTimeout(tid);//清除之前的计时器
        tid = setTimeout(refreshRem, 300);//300ms后改变rem大小
    }, false);

    win.addEventLister('pageshow', function( e ) {//页面显示时
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);
    refreshRem();
})( window );

参考：移动端页面使用rem来做适配

flex-box布局

flex-box，参考：
Flex 布局教程：语法篇
优点：布局方便，灵活性高；
缺点：兼容性问题；

图片处理

普通设置：

img {
    max-width: 100%;
}

或：

img {
    width: 100%;
    max-width: 300px;
}//限制最宽不超过300px；

响应式图片：

参考:
响应式图片srcset全新释义sizes属性w描述符
Srcset和sizes

即根据屏幕密度现实对应尺寸图片
src:指定资源（在浏览器不认识srcset和size时会加载这个）
srcset:srcset的值是可用图像版本的URL列表；每个图片的宽度都用w描述符来表明。
sizes：使用长度与媒体查询配合，浏览器会检测每一个媒体查询，直到匹配到为止。使用查询配合的长度作为“选择资源”拼图的最后一块：图像渲染宽度或者相对于视图。
eg.

"small.jpg"
 srcset="large.jpg 1024w,
         medium.jpg 640w,
         small.jpg 320w"
 sizes="(min-width: 36em) 33.3vw,
        100vw"
 alt="A rad wolf" />

媒体查询

1. 可以通过标签的media属性为样式表指定设备类型

"stylesheet" type="text/css" media="screen" href="screen-style.css">
"stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css"> //纵向屏幕
"stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css"> //宽度小于900px时

1. 在css中同样可以使用

@media screen and (max-width: 960px){
    body{
        background: #000;
    }
}
@media (max-width: 960px){
    body{
        background: #000;
    }
}
@media screen and (min-width:960px) and (max-width:1200px){
    body{
        background:yellow;
    }
}

1. @import方法
   @import可以引用样式文件，同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式，一种是在样式中通过@import调用另一个样式文件；另一种方法是在标签中的中引入，但这种使用方法在IE6~7都不被支持，如样式文件中调用另一个样式文件时，就可以指定对应的媒体类型。

@importurl(reset.css) screen;   
@importurl(print.css) print;

在中的