移动端书写记录介绍

移动端书写记录

一、meta写法

二、媒体查询

all 所有媒体

　　braille 盲文触觉设备

　　embossed 盲文打印机

　　print 手持设备

　　projection 打印预览

　　screen 彩屏设备

　　speech ‘听觉’类似的媒体类型

　　tty 不适用像素的设备

　　tv 电视

三、媒体特征

　　min-width 分辨率宽度大于等于设备值得时候识别

　　max-width 分辨率宽度小于等于设备值的时候识别

　　orientation:portraint 竖屏

　　orientation:landscape 横屏

　　-webkit-min-device-pixel-radio:2 像素比

四、关键字

　　and 和、与（连接媒体特性）

　　not 排除指定媒体类型

　　only 指定某种特定的媒体类型（很多时候是用来对那些不支持媒体特性但却支持媒体类型的设备）

五、样式引用

　　外联样式表 link[media="all and (min-width:600px)"]

　　@import @import url(index.css)all and (min-width:600px)

六、常规尺寸

　　@media all and (min-width:1200px){//大分辨率（pc分辨率、tv）}

　　@media all and (min-width:850px) and (max-width:1199px){//中等分辨率（pc小分辨率 || pad）}

　　@media all and (min-width:700px) and (max-width:849px){//pad分辨率}

　　@media all and (min-width:480px) and (max-width:699px){//高分辨率手机设备 || 低分辨率平板}

　　@media all and (max-width:479px){//手机设备}

七、控制像素比

八、动态设置字体大小

九、移动端固定定位的方法：

　　html{width:100%;height:100%;overflow:hidden;}

　　body{width:100%;height:100%;overflow:auto;}

　　需要定位的元素使用position:absolute;top:0;left:0;