Open JimmyLv opened 6 years ago
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
终极目的
Q:为什么你要花时间来做这项任务,而不是其他随便什么任务? A:
利益相关人清单
Q:当你交付最终结果的时候,会如何让世界变得更好? A:
能够产生反馈结果的小任务
ref: 移动 web 适配利器 - rem | AlloyTeam
rem 数值计算
如果利用 rem 来设置 css 的值,一般要通过一层计算才行,比如如果要设置一个长宽为 100px 的 div,那么就需要计算出 100px 对应的 rem 值是 100 / 16 =6.25rem
对于使用 sass 的工程:
前端构建中,完全可以利用 scss 来解决这个问题,例如我们可以写一个 scss 的 function px2rem 即:
1 由于我们所写出的页面是要在不同的屏幕大小设备上运行的
2 所以我们在写样式的时候必须要先以一个确定的屏幕来作为参考,这个就由我们拿到的视觉稿来定
3 假如我们拿到的视觉稿是以 iphone6 的屏幕为基准设计的
4 iPhone6 的屏幕大小是 375px,
一般我们获取到的视觉稿大部分是 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,修改
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:
⓷ 思维导图:头脑风暴/集思广益(发散)+ ⓸ 组织整理(收敛)
⓹ 明确「下一步行动」
能够产生反馈结果的小任务