2016年4月29日

[TOC]

2016年4月29日

移动端开发

CSS像素是一个抽象的单位，主要使用在浏览器上，用来精确的度量（确定）Web页面上的内容。一般情况下，CSS像素被称为与设备无关的像素（device-independent像素），简称为“DIPs”。在一个标准的显示密度下，一个CSS像素对应着一个设备像素。

在javascript中，“window.devicePixelRatio”可以用来获得相同的比率。

window.devicePixelRatio是设备上物理像素和设备像素（device-independent pixels (dips)）的比例。他有一个计算公式：window.devicePixelRatio = 物理像素/dips。

dips可以用来区分视网膜设备还是非视网膜设备。

http://www.w3cplus.com/css/towards-retina-web.html

Emulation 模拟器

1. Device 设备设置

   • model 模型选择

   • resolution 分辨率设置

   • Device pixel ratio 像素比设置

viewport

1. width [pixel_value | device-width]

2. user-scalable 是否允许缩放 （no||yes）

3. initial-scale 初始比例

4. minimum-scale 允许缩放的最小比例

5. maximum-scale 允许缩放的最大比例

6. target-densitydpi [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] ---安卓系统开始放弃此属性。

媒体查询

引入方式：

一、

二、

@import url("css/reset.css") all and (min-width: 600px) ;

使用@import的话，你必须时刻记得要将@import放到样式代码的最前面，否则它将会不起作用。避免使用@import 同样对网站性能有益。

三、

@media all and (min-width: 600px)
{
    .box
    {
        width:100px;
    }
}

媒体类型

1. all 所有媒体

2. braille 盲文触觉设备

3. embossed 盲文打印机

4. print 手持设备

5. projection 打印预览

6. screen 彩屏设备

7. speech '听觉'类似的媒体类型

8. tty 不适用像素的设备

9. tv 电视

媒体特性

1. (max-width:599px)

2. (min-width:600px)

3. (orientation:portrait) 竖屏

4. (orientation:landscape) 横屏

5. (-webkit-min-device-pixel-ratio: 2) 像素比

关键字

1. and

2. not not关键字是用来排除某种制定的媒体类型

3. only only用来定某种特定的媒体类型