获取元素到页面顶部的距离_Web前端页面重构之工具篇（Photoshop）

论坛 › 期权论坛     
选择匿名的用户   2021-5-30 03:50   450   0
<div class="._5ce-wx-style" style="font-size:16px;">
<div class="rich_media_content" id="js_content">
  <h2><span style="font-weight:bold;"><strong>一、说在前面的话</strong></span></h2>
  <h3><span style="font-weight:bold;">1.1 职责：拒绝&#34;图片仅供参考请以实物为准&#34;</span></h3>
  <p>团队的协作流程一般分为以下几个阶段：</p>
  <ul><li><p>专业的设计师做设计</p></li><li><p>由前端工程师切图重构还原成浏览器能渲染的页面，再开发功能。</p></li></ul>
  <p>术业有专攻，每一个环节都会有很高的水准，组合成一个各方面都非常专业的网站，为客户的业务提供更好的帮助。</p>
  <p>没错，客户需要的站点就是一碗蛋炒饭的话，前端开发人员就有必要让这碗蛋炒饭实物看起来跟食品封面上面的图片一样可口美味！</p>
  <p><img align="bottom" alt="6ea2ab06eda42e3450097f9221a0e512.png" border="0" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-a053f4c5d890a7eb3f1b29b25b24388a.png"></p>
  <p><img align="bottom" alt="872c9df9d04c52005e897e2266d11520.gif" border="0" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-ed41d1de2b2b5035cefbf11ca08e7c7a.gif"></p>
  <p><strong>拒绝图片仅供参考 请以实物为准</strong></p>
  <p><strong>UI给你什么样的设计稿你做出来就是他想要的样子！</strong></p>
  <p><strong>说远一点是匠人精神近一点 就是对设计成果的尊重</strong></p>
  <h3></h3>
  <h3><span style="font-weight:bold;"><strong><span style="font-weight:bold;">1.2 匠心：为什么要抠那个1px</span></strong></span></h3>
  <p><img align="bottom" alt="16ea67084875111c7266a2d3a4f1c440.png" border="0" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-767c7282771ff42803d0cc30d88a5fab.png"></p>
  <p><img align="bottom" alt="ccdc28714021bb8ee1b95a475229fa26.png" border="0" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-87c66882c99fed74455443da34d65a9d.png"></p>
  <p><img align="bottom" alt="47621e9f05e45f0832656f4cc97bf8e9.png" border="0" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-567adba04867c4192b1aff3355a0219e.png"></p>
  <p><img align="bottom" alt="aa58d5e0bdc3cc8fe2cac9fd4f4787e9.png" border="0" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-f9407472f29869003389c4974adb32ed.png"></p>
  <p><img align="bottom" alt="39285ab81c48f357839e4f56744a2c01.png" border="0" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-44c1dd52debbc413eef7831e1fb559bf.png"></p>
  <p><img align="bottom" alt="e5f9b47a4cbee8f4c0d1b741cd3d0805.png" border="0" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-92fd05344df7b914d539accbb280160c.png"></p>
  <p><img align="bottom" alt="9888a5e05d51530751ff1ab726dc9b41.png" border="0" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-00ffd61bb1f0e0e9890720e439275d41.png"></p>
  <p><img align="bottom" alt="7ba4f902a6b4f4a0461fb85831f36f0f.png" border="0" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-edaeb16610e026dec1a148538493a3e2.png"></p>
  <p>设计师有这种精益求精的工匠精神，</p>
  <p>没理由在前端这里断送呀！！！</p>
  <p>所以，前端开发，很有必要精确还原设计稿甚至要精确到像素级别！！！</p>
  <h2><span style="font-weight:bold;"><strong>二、如何做到还原设计稿</strong></span></h2>
  <p>还原设计稿是本分，没话说。</p>
  <p>但是如果真的细究到0px还原，那还真不是一件小事。</p>
  <p>一个网站在设计师手中，都是图片或文字(附加对图片或文字进行相关的处理)的排版；</p>
  <p>那么对应到前端来说就是一个个块、一个个元素(附加元素自身属性的实现)的排版；</p>
  <p>PS:WEB前端一般把一个个组件模块称之为块(Block)，组件内部的子节点称之为元素(Element)；即BEM核心思想。</p>
  <p>所以要做到还原设计稿，主要是要解决下面这三个问题：</p>
  <ul><li><p>块、元素的大小以及他们自身的基本属性(形状、圆角、颜色、背景、阴影等)</p></li><li><p>块与块、元素与元素之间的位置关系与距离</p></li><li><p>块、元素在页面的位置(父子模块、父子元素的相对位置)</p></li></ul>
  <p>下面对上面问题一一详细展开分析。</p>
  <h3><span style="font-weight:bold;"><strong><span style="font-weight:bold;">2.1 块、元素的大小以及他们自身的基本属性</span></strong></span></h3>
  <p>先来说下元素大小的问题，对于图片类的来说我们就要获取图片在PS中的正确大小，这一般来说百分之八十都没什么问题，除了一些设计师进行过特殊处理加工各层叠加等效果的需要费点时间搞定；然后，块与元素他们自身的基本属性使用CSS进行还原。</p>
  <p>而对于文字来说，就是文字字体大小(font-size)了；但是有个不能忽略的字体(font-family)问题，那就是同一个font-size使用不同的font-family可能表现出来的大小会相
回复
分享到 :
0 人收藏
返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

16级独孤
选择匿名的用户

积分:3875789
帖子:775174
精华:0
+ 关注 私信
期权论坛 期权论坛
期权网络科技版权所有
关于我们
联系我们
加入我们
反馈问题
免责声明
积分充值
统一社会信用代码
积分规则
网站地图
爱文库
下属网站
官方
新浪微博
微信公众号
◆
下载
表情包
App下载
期权论坛 期权论坛

QQ咨询|关于我们|Archiver|手机版|小黑屋|( 辽ICP备15012455号-4 ) Powered by 期权论坛 X3.2 © 2001-2016 期权工具网&期权论坛 Inc.

发布
内容

下载期权论坛手机APP