jimmylv.github.io
jimmylv.github.io copied to clipboard
JimmyLv
什么是最好的兼顾桌面和移动 Web 适配的响应式方案？
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 基础 & mdash;—Rem 与 Px 的转换_Preprocessor, Sass, SCSS, rem 教程_w3cplus
简单粗暴的移动端适配方案 - REM - 腾讯 Web 前端 IMWeb 团队社区 | blog | 团队博客
kujian/simple-flexible: mobile frontend simple rem responsive code
rem 自适应布局 - 移动端自适应必备: flexible.js - 前端开发博客
如何在 Vue 项目中使用 vw 实现移动端适配_vw, Layout, 布局, Vue, mobile 教程_w3cplus
视区相关单位 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：
⓷ 思维导图：头脑风暴/集思广益（发散）+ ⓸ 组织整理（收敛）
⓹ 明确「下一步行动」
能够产生反馈结果的小任务
