meta移动端

CSS

meta

<meta name="descript" content=""/>
告诉搜索引擎你的站点主要内容；

<meta name="keyword" content=""/>
向搜索引擎说明你的网页的关键词；

<meta name="author" content="你的名字"/>；
告诉搜索引擎你站点的制作作者；

<meta name="format-detection" content="telephone=no" />
忽略将页面中的数字识别为电话号码；

<meta name="format-detection" content="email=no" />
忽略Android平台中对邮箱地址的识别；

<meta name="apple-mobile-web-app-capable" content="yes" />
当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari；

<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式；
<!-- ios7.0版本以后，safari上已看不到效果 -->
<!-- 可选default、black、black-translucent -->

视口标签

<meta name="view" content="width=device-width,
user-scalable=no,initial-scale=1.0,
maximum-scale=1.0,minimum-scale=1.0">(快捷键meta:vp)

属性

width 宽度设置的是viewport宽度，可以设置device-width特殊值

initial-scale 初始缩放比，大于0的数字

maximum-scale 最大缩放比 ，大于0的数字

minimum-scale 最小缩放比，大于0的数字

user-scalable 用户是否可以缩放，yes或no（1或0）

各大浏览器私有前缀

火狐 -moz-  firefox 浏览器私有属性
内核Gecko

-ms-    ie 浏览器私有属性
内核Trident

-webkit-   safari、chrome 浏览器私有属性
safari webkit内核
谷歌以前是Webkit内核，现在是Blink内核；

-blink-   opera 浏览器私有属性
Blink内核

注： 圆角边框兼容性写法

​    -moz-border-radius:10px;
​    -webkit-border-radius:10px;
​    -o-border-radius:10px;
​    border-radius:10px;

文字抗锯齿

-webkit-font-smoothing:antialiased;

CSS初始化 normalize.css

移动端CSS初始化推荐使用normalize.css/

Normalize.css 保护了有价值的默认值

​ 修复了浏览器的bug

​ 模块化 有详细的文档

官网地址:Github

特殊样式

box-sizing:border-box;(css3盒子模型)

-webkit-box-sizing:border-box;

-webkit-tap-highlight-color:transparent;(点击高亮 需要清除)

-webkit-appearance:none; (在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式);

img,a{-webkit-touch-callout:none;}(禁用长按页面时弹出菜单)

屏幕尺寸像素

1.屏幕尺寸：指的是屏幕对角线的长度

2.分辨率：是指宽度上和高度上最多能显示的物理像素点个数

3.点距：像素与像素之间的距离，点距和屏幕尺寸决定了分辨率大小

4.PPI:屏幕像素密度，即每英寸(1英寸=2.54厘米)聚集的像素点个数，这里的一英寸还是对角线长度

5.DPI:每英寸像素点，印刷行业术语。对于电脑屏幕而言和PPI是一个意思

6.设备像素(又称为物理像素): 指设备能控制显示的最小物理单位，意指显示器上一个个的点。从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，和屏幕尺寸大小有关，单位 pt。

7.设备独立像素(也叫密度无关像素或逻辑像素)：可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，这个点是没有固定大小的，越小越清晰，然后由相关系统转换为物理像素。

8.css像素(也叫虚拟像素)：指的是 CSS 样式代码中使用的逻辑像素，在 CSS 规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px 是一个相对单位，相对的是设备像素(device pixel)

9.DPR(设备像素比)：设备像素比 = 设备像素（物理像素） / 设备独立像素（逻辑像素）。(在Retina屏的iphone上，DPR为2，1个css像素相当于2个物理像素

设备划分

手机最小宽度 320px

iphone安卓横屏 480px

较多手机尺寸 640px/750px

超小屏幕（手机） < 768px （设置宽度为100%）

小屏设备（平板） >= 768px～< 992px （设置宽度为750px）

中等屏幕（桌面显示器） >= 992px～< 1200px（设置宽度为970px）

宽屏设备（大桌面显示器） >= 1200px（设置宽度为1170px）

媒体查询

@media可以针对不同的屏幕尺寸设置不同的样式
重置浏览器大小过程中，页面会根据浏览器的宽高重新渲染页面

@media mediatype and|not|only(media feature){
CSS-Code;}

mediatype 媒体类型
     all用于所有设备
    print 用于打印机和打印预览
    screen 用于电脑屏幕，平板电脑，智能手机等
and not only 关键字
    and 多个媒体特性链接到一起 （且）
    not 排除某个类型（非）
    only指定某个特定类型（可以省略）
media feature 媒体特性 必须有小括号包含

orientation:portrait 竖屏

orientation:landscape 横屏

媒体特性


width 定义输出设备上页面可见区域宽度
min-width 定义输出设备中页面最小可见区域宽度
max-width 定义输出设备中页面最大可见区域宽度

eg:

@media screen and(max-width:800px){
body{
background-color:pink;
}
}
@media screen and(max-width:500px) and (min-width:300px) {
body{
background-color:purple;
}
}
（在屏幕上并且最大宽度是800px，设置背景颜色粉色）
（max-width 是小于等于800px有效果,多条件时用and连接）

媒体资源引入

<link rel="stylesheet" media="mediatype and|not|only(media feature)" href="mystylesheet.css">

rem

rem是指相对于根元素的字体大小的单位。

媒体查询设置根元素font-size后配合rem

物理像素/dpr/相应根元素大小

Viewport units

当没有滚动条时，100vw跟100%相等

当有滚动条时，100vw跟100%不相等（100%减去了滚动条宽度 而100vw不减）


vw : 1vw 等于视口宽度的1%

vh : 1vh 等于视口高度的1%

vmin : 选取 vw 和 vh 中最小的那个

vmax : 选取 vw 和 vh 中最大的那个

vw与rem结合实现移动端适配

当设计图为640px时，逻辑像素=640px/2
320px=100vw
3.2px=1vw
1px=0.3125vw

导航高度88px=>44px 44px*0.3125=？

设置

html{font-size:0.3125vw;}

(同理当设计图为750px时，1px=0.2667vw即可)

44px=>44rem即可

flexible插件
针对750px设计图设置（自动设置dpr）

使用方法
1.删除视口标签
2.引入相应的js文件
3.计算方法：物理像素/100=rem

二倍精灵图

在ps中把精灵图按比例缩放为原来的一半

然后根据大小测量坐标

在background-size中也要写精灵图原来宽度的一半

注：真机测试时（iphone高清屏）1px会比真实的大小粗
1px改为.5px
css3缩放为原来一半




移动端弹性布局

关键元素高宽和位置都不变，只有容器元素在做伸缩变换。

布局原则：文字流式，控件弹性，图片等比缩放