移动端适配

做法一：仅使用vw作为CSS单位

在仅使用 vw 单位作为唯一应用的一种 CSS 单位的这种做法下，我们遵守：

1.对于设计稿的尺寸转换为vw单位，我们使用sass函数编译

 

做法二：搭配vw和rem，布局更优化2.无论是文本还是布局高宽、间距等都使用 vw 作为 CSS 单位

 

3.1物理像素线（也就是普通屏幕下 1px ，高清屏幕下 0.5px 的情况）采用 transform 属性 scale 实现。

4.对于需要保持高宽比的图，应改用 padding-top 实现

  

问题： 无论视口过大还是过小，它也随着视口过大或者过小，失去了最大最小宽度的限制。

1. 给根元素大小设置随着视口变化而变化的 vw 单位，这样就可以实现动态改变其大小。
2. 限制根元素字体大小的最大最小值，配合 body 加上最大宽度和最小宽度

用sass编译器编译

// rem 单位换算：定为 75px 只是方便运算，750px-75px、640-64px、1080px-108px，如此类推

$vm_fontsize: 75; // iPhone 6尺寸的根元素大小基准值

@function rem( $px) {

@return ( $px / $vm_fontsize ) * 1rem;

}

// 根元素大小使用 vw 单位

$vm_design: 750;

html {

font-size: ( $vm_fontsize / ( $vm_design / 2)) * 100vw;

// 同时，通过Media Queries 限制根元素最大最小值

@ media screen and (max-width: 320px) {

font-size: 64px;

}

@ media screen and (min-width: 540px) {

font-size: 108px;

}

}

// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小

body {

max-width: 540px;

min-width: 320px;

}

- 防止手机中网页放大和缩小,就是在 meta 中的 viewport 中添加 user-scalable=0或者 user-scalable=no

- format-detection设置,防止自动识别电话号码和邮箱

```

<meta name="format-detection" content="telephone=no">

<meta name="format-detection" content="email=no">

```

- 上下拉动滚动条时卡顿、慢

```

 body {

    -webkit-overflow-scrolling: touch;

    overflow-scrolling: touch;

}

```

- phone及ipad下输入框默认内阴影

```

input{

     -webkit-appearance: none; 

}

```

- 顶部状态栏背景色

```

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

```

### rem布局

 

- 定义:

rem 是相对于根元素(也就是html 中 font-size 的大小)中字体大小的单位.

- rem实现适配的原理

    - 核心思想:百分比布局可实现响应式布局,而 rem相当于百分比布局

    - 实现手段:动态获取当前窗口的宽度,除以一个固定的宽度,得到 rem的值