移动端响应式的文件头分享记录

移动端响应式web的文件头

- width	视口宽度
- height	视口高度
- device-width	设备屏幕的宽度
- device-height	设备屏幕的高度
- orientation	检测屏幕处于横屏还是竖屏
- aspect-ratio	基于视口的宽高比例
- device-aspect-ratio	基于设备屏幕的宽高比
- color	颜色的位数，如min-color：32 匹配设备是否有32位或以上的颜色
- color-index	设备的颜色索引表中的颜色数
- monochrome	检测单色振缓冲区中每像素使用的位数。为非负数，如monochrome：3
- resolution	检测屏幕或打印机的分辨率，如min-resolution：300dpi(dpi后面会介绍)，也可以是每厘米像素点的度量值，如min-resolution：120dpcm
- scan	扫描方式，值为progressive（逐行扫描）、interlace（隔行扫描）
- grid	检测输出设备是网格设备还是位图设备

 

 

<metename="viewport" content="width=device-width,initial-scale=1,minimun-scale=1,maximun-scale=1,user-scalable=no,target-densitydpi=high-dpi">

如上代码，

name=”viewport” content中width=device-width表示浏览器页面宽度等于设备宽度（同理可以设置高度，也可指定具体值），

initial-scale=1表示页面不缩放保持，

mininum-scale=1和maximum-scale=1表示允许用户最小缩小至原大小和扩大到原大小（实际就是不让缩放^^），

user-scaleable=no 表示禁止缩放,

target- densitydpi = high-dpi表示适配高分辨率的屏幕，还可以取值为dpi_value | device-dpi| high-dpi | medium-dpi | low-dpi，后面的四个定性，第一个定量，即dpi_value是DPI值，device-dpi是使用设备原本的 dpi 作为目标 dp，不发生默认缩放，而后面的三个是指dpi取值在一定范围的表示。

这里我们先介绍前文出现过的一个名词dpi，所表示的是每英寸所拥有的像素（pixel）数目，数值越高，即代表显示屏能够以越高的密度显示图像。

 

 

css样式举例

 

中分辨率屏幕

@media(-webkit-min-device-pixel-ratio:1){css代码}

 

高分辨率屏幕

@media(-webkit-min-device-pixel-ratio:1.5){css代码}

 

超高分辨率屏幕

@media(-webkit-min-device-pixel-ratio:2){css代码}

 

768宽度分野

@media screen and (max-width:768){css代码}

　

盒子模型

这时候我们可以试试新的display:-webkit-box，另外还有如下属性配合使用，

 

-webkit-box-orient	子元素排列方向 horizontal | vertical | inline-axis | block-axis | inherit，其中默认值是inline-axis，即横向排列
-webkit-box-direction	子元素排列顺序 normal | reverse | inherit，其中默认值是normal
-webkit-box-flex-group	以组为单位的流体系数
-webkit-box-ordinal-group	以组为单位的子元素排列方向
-webkit-box-lines	子元素是否换行，类似word-wrap和word-break的作用
-webkit-box-align	子元素垂直方向的对其方式
-webkit-box-pack	子元素水平方向的对其方式