182 lines
6.3 KiB
Markdown
182 lines
6.3 KiB
Markdown
# 移动开发
|
||
|
||
## 常见分辨率
|
||
|
||
| 设备 | 尺寸（英寸） | 物理分辨率 | 开发尺寸(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 标签通知浏览器
|
||
|
||
```html
|
||
"<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
|
||
|
||
### 移动端的特殊样式
|
||
|
||
```css
|
||
/*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
|
||
|
||
#### 媒体查询
|
||
|
||
```css
|
||
@media mediatype and|not|only (media feature) {
|
||
CSS-Code;
|
||
}
|
||
```
|
||
|
||
* 查询类型: `all` 所有设备 `print` 打印机 `scree` 电脑平板手机
|
||
* 关键字 `and not only` 将媒体类型或多个媒体特性连接到一起做为媒体查询的条件
|
||
* 特性: width min-width max-width
|
||
|
||
书写顺序: 从低分辨率到高(推荐), 或者从高到低.
|
||
|
||
```css
|
||
/* 第一档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 自动转换
|
||
|
||
```less
|
||
/* 为了整体的效果更佳的美观，我们需要写死小于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" |