什么是最好的兼顾桌面和移动 Web 适配的响应式方案？

ref: 移动 web 适配利器 - rem | AlloyTeam

rem 数值计算

如果利用 rem 来设置 css 的值，一般要通过一层计算才行，比如如果要设置一个长宽为 100px 的 div，那么就需要计算出 100px 对应的 rem 值是 100 / 16 =6.25rem

对于使用 sass 的工程：

前端构建中，完全可以利用 scss 来解决这个问题，例如我们可以写一个 scss 的 function px2rem 即：

```sass
@function px2rem($px){
$rem : 37.5px;
@return ($px/$rem) + rem;
}
```

1 由于我们所写出的页面是要在不同的屏幕大小设备上运行的

2 所以我们在写样式的时候必须要先以一个确定的屏幕来作为参考，这个就由我们拿到的视觉稿来定

3 假如我们拿到的视觉稿是以 iphone6 的屏幕为基准设计的

4 iPhone6 的屏幕大小是 375px，

```sass
rem = window.innerWidth / 10
```

一般我们获取到的视觉稿大部分是 iphone6 的，所以我们看到的尺寸一般是双倍大小的，在使用 rem 之前，我们一般会自觉的将标注 / 2，其实这也并无道理，但是当我们配合 rem 使用时，完全可以按照视觉稿上的尺寸来设置。
1 设计给的稿子双倍的原因是 iphone6 这种屏幕属于高清屏，也即是设备像素比 (device pixel ratio)dpr 比较大，所以显示的像素较为清晰。
2 一般手机的 dpr 是 1，iphone4，iphone5 这种高清屏是 2，iphone6s plus 这种高清屏是 3
3 拿到了 dpr 之后，我们就可以在 viewport meta 头里，取消让浏览器自动缩放页面，而自己去设置 viewport 的 content
4 设置完之后配合 rem，修改

```sass
@function px2rem($px){
$rem : 75px;
@return ($px/$rem) + rem;
}
```

----------

https://www.one-tab.com/page/a3OYm7cjSVyRk1bWbwWlwA

[egoist/vue-media: A CSS media query component for Vue.js](https://github.com/egoist/vue-media)

[Approaches to Media Queries in Sass | CSS-Tricks](https://css-tricks.com/approaches-media-queries-sass/)

[Esprit Fashion for Women, Men & Children in the Online-Shop | Esprit](https://www.esprit.co.uk/womenswear)

[sass rem - Google Search](https://www.google.com/search?lr=lang_zh-CN&newwindow=1&hl=en&biw=1679&bih=954&tbs=lr%3Alang_1zh-CN&ei=0Iw5W4vWFI_f8APsvIWoDA&q=+sass+rem&oq=+sass+rem&gs_l=psy-ab.3..0i7i30k1l2j0i13k1l2j0i7i30k1l3j0i13k1j0i7i30k1j0i13k1.594409.596117.0.596233.6.6.0.0.0.0.544.544.5-1.1.0....0...1c.1j4.64.psy-ab..5.1.543....0.6wM1_DNadfU)

[Sass 基础 & mdash;—Rem 与 Px 的转换_Preprocessor, Sass, SCSS, rem 教程_w3cplus](https://www.w3cplus.com/preprocessor/sass-px-to-rem-with-mixin-and-function.html)

[如何用 sass rem 写响应式？ - 简书](https://www.jianshu.com/p/1de87b97485c)

[移动 web 适配利器 - rem | AlloyTeam](http://www.alloyteam.com/2016/03/mobile-web-adaptation-tool-rem/)

[简单粗暴的移动端适配方案 - REM - 腾讯 Web 前端 IMWeb 团队社区 | blog | 团队博客](http://imweb.io/topic/5a523cc0a192c3b460fce3a5)

[kujian/simple-flexible: mobile frontend simple rem responsive code](https://github.com/kujian/simple-flexible/)

[rem 自适应布局 - 移动端自适应必备: flexible.js - 前端开发博客](http://caibaojian.com/flexible-js.html)

[如何在 Vue 项目中使用 vw 实现移动端适配_vw, Layout, 布局, Vue, mobile 教程_w3cplus](https://www.w3cplus.com/mobile/vw-layout-in-vue.html)

[Rem 布局的原理解析](https://yanhaijing.com/css/2017/09/29/principle-of-rem-layout/)

[视区相关单位 vw, vh.. 简介以及可实际应用场景 « 张鑫旭 - 鑫空间 - 鑫生活](https://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/)

[sass media variables - Google Search](https://www.google.com/search?q=sass+media+variables)

[Responsive Web Design in Sass: Using media queries in Sass 3.2](http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32)

[Approaches to Media Queries in Sass | CSS-Tricks](https://css-tricks.com/approaches-media-queries-sass/)

## 项目纵向拆分

### ⓵ 定义目标和原则

终极目的

Q：为什么你要花时间来做这项任务，而不是其他随便什么任务？
A：

### ⓶ 展望结果（OKRs）

利益相关人清单

Q：当你交付最终结果的时候，会如何让世界变得更好？
A：

### ⓷ 思维导图：头脑风暴/集思广益（发散）+ ⓸ 组织整理（收敛）

### ⓹ 明确「下一步行动」

能够产生反馈结果的小任务