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

@JimmyLv 2018-07-02 04:47:01发表于 JimmyLv/jimmylv.github.io

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

rem 数值计算

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

对于使用 sass 的工程:

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

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

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

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

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

4 iPhone6 的屏幕大小是 375px,

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,修改

@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


Approaches to Media Queries in Sass | CSS-Tricks


Esprit Fashion for Women, Men & Children in the Online-Shop | Esprit


sass rem - Google Search


Sass 基础 & mdash;—Rem 与 Px 的转换_Preprocessor, Sass, SCSS, rem 教程_w3cplus

如何用 sass rem 写响应式? - 简书

移动 web 适配利器 - rem | AlloyTeam

简单粗暴的移动端适配方案 - REM - 腾讯 Web 前端 IMWeb 团队社区 | blog | 团队博客

kujian/simple-flexible: mobile frontend simple rem responsive code

rem 自适应布局 - 移动端自适应必备: flexible.js - 前端开发博客

如何在 Vue 项目中使用 vw 实现移动端适配_vw, Layout, 布局, Vue, mobile 教程_w3cplus

Rem 布局的原理解析

视区相关单位 vw, vh.. 简介以及可实际应用场景 « 张鑫旭 - 鑫空间 - 鑫生活

sass media variables - Google Search

Responsive Web Design in Sass: Using media queries in Sass 3.2

Approaches to Media Queries in Sass | CSS-Tricks

项目纵向拆分

⓵ 定义目标和原则

终极目的

Q:为什么你要花时间来做这项任务,而不是其他随便什么任务?
A:

⓶ 展望结果(OKRs)

利益相关人清单

Q:当你交付最终结果的时候,会如何让世界变得更好?
A:

⓷ 思维导图:头脑风暴/集思广益(发散)+ ⓸ 组织整理(收敛)

⓹ 明确「下一步行动」

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