devStandard/docs/learning/2-css/3-移动开发.md

移动开发

常见分辨率

设备	尺寸（英寸）	物理分辨率	开发尺寸(px)	物理像素与CSS像素比(dpr)
iPhone 3GS	3.5	320*480	320*480	1
iPhone 4/4s	3.5	640*960	320*480	2
iPhone 5/5s	4	640*1136	320*568	2
iPhone 6/6s	4.7	750*1334	375*667	2
iPhone6 Plus/6s Plus	5.5	1242*2208	414*736	3

viewport 视口

• layout viewport 布局视口: 早期解决 pc 网页在手机上展示的问题, 一般是 980 px
• visual viewport 视觉视口: 用户能看到的网站区域
• ideal viewport 理想视口: 讲布局视口为视觉视口, 通过 meta 标签通知浏览器

"<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">"

最标准的viewport设置

• 视口宽度和设备保持一致
• 视口的默认缩放比例1.0
• 不允许用户自行缩放
• 最大允许的缩放比例1.0
• 最小允许的缩放比例1.0

移动端的特殊样式

/*CSS3盒子模型*/
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 /*点击高亮我们需要清除  设置为transparent 完成透明*/
 -webkit-tap-highlight-color: transparent;
 /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
 -webkit-appearance: none;
 /*禁用长按页面时的弹出菜单*/
 img,a { -webkit-touch-callout: none; }

移动端常见布局

• 流式布局: 也就是百分比布局
• flex 弹性布局
• less + res 媒体查询
• 混合布局

百分比布局

vw vh

• vw viewport width 视口宽度
• vh viewport height 视口高度

flex 布局

https://ruanyifeng.com/blog/2015/07/flex-grammar.html

容器的属性

• flex-direction：设置主轴的方向
  • flex-direction: row | row-reverse | column | column-reverse;
• flex-wrap：设置子元素是否换行
  • `flex-wrap：nowrap | wrap | wrap-reverse;
• flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
  • flex-flow: <flex-direction> || <flex-wrap>;
• justify-content：设置主轴上的子元素排列方式
  • justify-content: flex-start | flex-end | center | space-between | space-around;
  • between 是左中右, around 是三等距
• align-items：设置侧轴上的子元素排列方式（单行）
  • align-items: flex-start | flex-end | center | baseline | stretch;
• align-content：设置侧轴上的子元素的排列方式（多行）
  • `align-content: flex-start | flex-end | center | space-between | space-around | stretch;

项目的属性

• flex-grow: <number>; 项目的放大比例 (===占用剩余的比例===), 默认 0
  • 如果一个项目为 2, 其它为 1, 那么它占用剩余空间的比例是其它的两倍
• flex-shrink: <number>; 项目的缩小比例, 默认为 1
  • 如果空间不足, 该项目将缩小.
  • 如果多个项目都为 1, 那么空间部足将等比缩小.
  • 如果一个为 0, 其它为 1, 那么空间不足, 为 0 的不缩小
• flex-basis: <length> | auto; 在分配多余空间之前，项目占据的主轴空间，默认值 auto
  • 可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间
• flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]; 是 flex-grow flex-shrink flex-basis 的缩写
  • 有两个快捷值 auto (1 1 auto) 和 none (0 0 auto), 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值
• order: int; 属性定义子项的排列顺序, 默认为 0, 数值越小, 越靠前
• align-self: auto | flex-start | flex-end | center | baseline | stretch; 控制子项自己在侧轴的排列方式, 覆盖掉 align-items

rem 布局

root em 相对 html 根字体大小的百分比 根元素（html）设置font-size=12px; 非根元素设置width: 2rem; 则换成px表示就是24px

媒体查询

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

• 查询类型: all 所有设备 print 打印机 scree 电脑平板手机
• 关键字 and not only 将媒体类型或多个媒体特性连接到一起做为媒体查询的条件
• 特性: width min-width max-width

书写顺序: 从低分辨率到高(推荐), 或者从高到低.

/* 第一档x<540, 第二档540=<x<970, 第三档x>=970 */
@media screen and (max-width: 539px) {
    body {
      background-color: pink;
    }
}
@media screen and (min-width: 540px) {
    body {
      background-color: green;
    }
}
@media screen and (min-width: 970px) {
    body {
      background-color: green;
    }
}

/* screen and 不能省略 */
/* 媒体查询最好从小到大*/

淘宝的方案 flexible

有 vw vh, 不再需要了

10 等分, 每一份 rem 等于视口的 1/10 px

github地址：https://github.com/amfe/lib-flexible

• 需要装 vscode 插件 cssrem 自动转换

/* 为了整体的效果更佳的美观，我们需要写死小于320px屏幕 大于750px 的字体大小  */
@media screen and (max-width: 320px) {
  html {
    font-size: 32px !important;
  }
}
@media screen and (min-width: 750px) {
  html {
    font-size: 75px !important;
  }
}

bootstrap 响应式布局

中文网: http://www.bootcss.com/

官网: http://getbootstrap.com/

推荐网站 http://bootstrap.css88.com/

栅格系统

特点:

• 媒体查询从小到大写
• 小屏幕的样式写了, 宽屏幕的样式没写, 切换到宽屏幕时会应用小屏幕的样式
• 小屏幕的样式写了, 宽屏幕的样式也写了, 切换到宽屏幕时只会应用宽屏幕的样式

规则:

• 按照不同屏幕划分为1~12 等份
• 行（row） 可以去除父容器作用15px的边距
• xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大；
• 列（column）大于 12，多余的"列（column）"所在的元素将被作为一个整体另起一行排列
• 每一列默认有左右15像素的 padding
• 可以同时为一列指定多个设备的类名，以便划分不同份数 例如 class="col-md-4 col-sm-6"