前端如何实现视觉设计稿

Posted 2023-03-23

参考技术A

在这篇文章中将和大家探讨一下关于前端在移动端开发如何去实现视觉设计稿。探讨过后，在大家的实际工作中或许能帮助解决一些问题。

一般设计稿是 640px 或者 750px （现在最流行），但是 iPhone 5 不是 320px 宽吗，iPhone 6 不是 375px 宽吗?
这里需要理解一下基础概念： 设备像素 (device pixel)， CSS 像素 (css pixel)以及 设备像素比 (device pixel ratio)。

垂直手机屏幕下，使用 <meta name="viewport" content="width=device-width"/> ，iPhone 5 屏幕物理像素 640 像素，独立像素还是 320 像素，因此， window.devicePixelRatio 等于 2。

比如 iPhone 5，6 使用的是 Retina 视网膜屏幕（2 倍屏），6 Plus 是 3 倍屏，使用 2px × 2px 的 device pixel 代表 1px × 1px 的 css pixel，所以设备像素数为 640 × 1136px （5）， 750 × 1134 （6），而 CSS 逻辑像素数为 320 x 568px （5）， 375 × 667 （6）；5，6 的 window.devicePixelRatio=2，6 Plus 为 3。

H5 适配：rem 方案
rem：是 CSS3 新增的一个相对单位，相对于 html 标签的 font-size 的大小为基础的。而 font-size 的大小可以动态根据手机屏幕宽度document.documentElement.clientWidth 来设置，从而达到自适应屏幕的目的。

我这里找了一下 小米 ， 网易 ， 拉勾网 ， 手淘 以及糯米，大同小异。

设计稿是 720px 的，即 5 英寸屏幕的安卓手机（720 x 1280px）。
对于页面缩放和横竖屏事件进行监听，改变 html 根元素字体 clientWidth/720/100 。
如图是这样计算的 375/(720/100) = 52.0833

iPhone 6 : 375/7.5=50 , 则知道设计稿应该是基于 iPhone 6 来的，所以它的设计稿竖直放时的横向分辨率为 750px，为了计算方便，取一个 100px 的 font-size 为参照，那么 body 元素的宽度就可以设置为 width: 7.5rem ，于是 html 的 font-size=deviceWidth / 7.5 。布局时，设计图标注的尺寸除以 100 得到 css 中的尺寸。并且布局中的 font-size 也可用 rem 单位。

设置html根元素字体为 65.5% ，对应px单位则为 10.48px ，则列表里时间信息字体设置为 1rem = 10.48px ，chrome在 -webkit-text-size-adjust: 100%; 情况下小于 12px 的一律显示为 12px 。

拉勾网页面列表部分是 px 为单位，字体是 rem ，底部bar是使用 百分百 来控制宽高间距。

之前网上讨论的比较多的是

则 1em = 16px * 62.5% = 10px ，em 的初始值为 1em = 16px ，而为了方便计算， 换算一下 10 / 16 （16px 是 Chrome 浏览器默认字体大小）。缺点是进行任何元素设置，都有可能需要知道他父元素的大小，比较繁琐低效。

（1）动态设置 viewport的scale

（2）动态计算 html 的 font-size

（3）布局的时候，各元素的 css 尺寸 = 设计稿标注尺寸/设计稿横向分辨率/10

设计稿是 750 的，所以 html 的 font-size 就是 75，如果某个元素是 150px的宽，换算成 rem 就是 150 / 75 = 2rem。

整个手淘设计师和前端开发的适配协作基本思路是：

手淘推出了一套移动端适配的方案—— Flexible 方案 。

总结来说：

设计稿是 750 的。

优点：简单粗暴，所有 css 尺寸均为设计稿尺寸直接除 2，开发快速简单；
缺点：可能出现一排放不下的情况，需要针对小屏幕如 5 及以下做单独适配

vw 相对于视窗的宽度：视窗宽度是 100vw 。
如果视区宽度是 100vm, 则 1vm 是视区宽度的 1/100, 也就是 1%，类似于 width: 1%。
那 iPhone 6 来说， document.documentElement.clientWidth=375 , 则豆腐块宽度为 375/100*30=112.5px

混合: rem px vw 百分百等单位混用

略，同上糯米WAP

这里假设设计稿 640px，则设置根元素 font-size 为 4.375vw，根据屏幕宽度自适应，在视窗宽度为 320px 的时候，正好是 14px (14 / 320 = 0.04375)。 达到页面默认字体大小 14px 的目的（其他大小也 ok）。好了，现在页面上所有以 rem 为单位的属性值都会随着屏幕的宽度变化而变化，达到自适应的目的。（ 自适应不用 js 动态设置根元素大小 ）

在移动端页面开发中，视觉童鞋一般会用 750px（iPhone 6）来出设计稿，然后要求 FE 童鞋能够做到页面是自适应屏幕的，这种情况下就可以用 rem 或者 vm 等相对单位来做适配，愉快和视觉童鞋一起玩耍啦。

内容转自： 大专栏

前端学习路线

一、HTML标签和CSS基础

熟练使用HTML和CSS实现静态页面布局，标准还原UI设计稿

难点：

大量的标签和语法知识，需要系统的学习和大量整站练习

1、HTML标签和CSS基础

2、CSS语法（页面皮肤）

3、常见布局

4、配合UI设计师，实现相关PC端UI设计稿

二、javascript基础

学习javascript基础语法，编程技巧，培养编程思维能力，编写具有动效和交互的网页。

难点：

用编程思维解决实际需求

1、git和github仓库使用

2、js基础语法、数据类型、循环、对象、数组、逻辑控制等

3、常见算法的js实现，比如排序等

4、DOM操作API（页面元素的操作）

5、BOM操作API（浏览器对象，历史记录，打开关闭窗口等）

6、综合练习（柱状图排序/轮播图/放大镜/购物车/拖拽/todolist），并且使用git上传到github仓库。

7、jquery以及jquery相关案例实现

三、HTML5新增API，CSS3动画以及移动端开发

移动端开发，实现响应式网页开发；可以适配各种尺寸的设备，掌握当下流行的响应式UI框架。

难点：

案例综合性比较强，非常考验之前所学知识点的熟练度

1、HTML5新增API（语义化标签/音频/本地存储等）

2、CSS3（动画，过渡等）

3、移动端开发适配，flex布局

4、移动端jQ-zepto

5、sass、less等CSS预处理器

6、响应式开发以及layui，bootstrap等流行UI框架

7、项目练习：使用移动端/响应式开发还原设计稿；H5活动页（动画较多），页面侧栏滑动字母选择城市，具有本地存储功能的待办项网页。

四、JS高级，canvas,nodejs和ajax

接触js高级编程技巧，强化js编程能力，学习通过ajax获取后台数据原理和方法，了解web服务器原理实现可具有动态数据的网页，具备基本的网站开发能力

难点：

理解web服务器原理及利用动态数据实现需求的逻辑。

1、面向对象编程、作用域、原型、闭包、this、同步异步等

2、详细学习ES6、ES7新的语法

3、lodash.js

4、前端绘图canvas，图表可视化库如Echarts等，案例（小球动画/面向对象封装）

5、nodejs,express模板引擎原理，HTTP协议

6、正则表达式

7、元素ajax以及ajax封装，jquery的ajax使用

8、ajax跨域的原理及解决方法

9、mock.js介绍及使用，调试工具postman，apizza的介绍和使用

10、项目练习：使用面向对象编程方式实现完整的轮播插件，使用node搭建基本的后台服务器，完善在线待办列表，用ajax获取后台数据。

11、项目练习：使用layui框架配合后台接口，实现相对完整的影视信息展示网站，包括用户注册，登录，查看用户数据，查看电影列表，电影详情，演员列表，演员详情，预告片等功能。

五、前端流行框架VUE，打包工具webpack，element-ui框架等

熟练掌握vue框架及全家桶的使用，前后端分离，提高开发效率

难点：

vue-router和vuex的灵活使用

1、vue入门，基础语法，typescript语法，双向绑定原理，组件化，组件通信等

2、vue进阶，vue脚手架，vue-devtool调试工具，axios，自定义过滤器，自定义指令，发布订阅设计模式，组件封装复用等

3、vue-router及vuex

4、模块化规范，webpack安装配置，打包文件，懒加载等前端程工程化工具

5、深入vue原理，MVVM，虚拟DOM，diff算法源码，vue组件如何渲染和更新的，用Js实现hash路由，常见性能优化

6、element-ui介绍及使用，以及api工具类的axios封装

7、案例：vue实现完整的todo-list

六、跨平台开发

进行小程序，混合app等跨平台开发

1、小程序开发

2、小程序框架

3、小程序项目开发，学院入学报名系统，不凡音乐小程序

4、公众号开发学习

5、uniapp开发学习

6、此阶段项目练习多为熟悉语法，练手预热

七、实战阶段

1、PC整站：响应式开发

摄影/婚纱/家居/旅行等整站（有设计稿）

2、vue项目：移动端开发

虫虫电影移动端开发

3、vue项目：PC中后台开发 

element-ui使用

vue-element-admin后台框架的介绍和使用

常用vue第三方库的介绍和使用，比如：tinymce富文本，markdown编辑器等。

完整案例：学员管理系统

权限（用户，角色，资源）

4、vue项目：乐居移动web+中后台（商城）

前后移动端设计稿讲解

后台功能逻辑和交互逻辑讲解

后台接口（不少于80个）功能介绍

中后台重点，难点功能点实现

前台接口功能和使用介绍

前台功能实现

5、uiapp开发

乐居移动端uiapp版本

打包H5版本，微信小程序版本，app版本

6、公众号开发

jssdk的介绍和使用，比如相机，录音，定位等

微信用户基本信息调用

微信jssdk支付和网页支付

八、面试指导、踏入江湖、新的征程

1、此阶段指导简历，模拟简历

2、大量面试题详解和原理实现，比如实现promise Axios，节流防抖等

3、企业上门招聘

4、投递简历、面试、就业后仍需保持学习，已在程序员之路越走越远。