热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

拿到美工/UI的PSD图,接下来写前端页面的顺序,求指导

拿到手的psd是750*1334分辨率,这应该是iphone6的分辨率,那么,此时是不是我的chrome模拟器就要设置成iphone6了?如果是的话,那么《问题1》来了。我的电脑分辨率是

拿到手的psd是750*1334分辨率,这应该是iphone6的分辨率,那么,此时是不是我的chrome模拟器就要设置成iphone6了?如果是的话,那么
《问题1》来了。我的电脑分辨率是1366*768,chrome模拟iphone6的话会缩放,影响做网页效果,我一般设置成iphone5,这样的话能够不缩放显示手机端页面,字体也就不会因为缩放模糊。那么如果设置成iphone5来做iphone6的psd,肯定无法做到完全一样(图标大小肯定要比psd的小一点)。后来,
《问题2》我设置了不同分辨率下的html的font-size不一样,所有涉及到长度宽度行高这些css都用rem单位,不采用px和em,但是这样的话,也只能在各个分辨率的手机端下勉强凑活,根本无法完全和psd一样。于是,我又纠结了。
《问题3》,美工给的iphone的psd,有的页面上会标注元素长度px,有的没有,那我就很奇怪,我是否应该把chrome模拟器设置成iphone6然后和psd做到像素级的0偏差?至于iphone5和iphone6plus分辨率下的页面我该用@media来分别写吗?那太累了!!以前PC端倒是可以0像素偏差,可是手机端感觉力不从心啊!
《问题4》有时候收到的PSD里面的有5个文件夹比如drawable-xxhdpi,其实就是不同分辨率下icon,我一般是用的最大的文件夹里面的icon,那么,这是偷懒么?是不是应该适配不同分辨率的手机并且@media使用不同大小的icon,这样的话,我不是更加吃不消么?



--------------------------------分割线-------------------------------------

其实,说了这么久,还是自己完全不知道怎么制作手机端页面,大家是怎么制作的啊,有没有什么教程什么的啊,我是否真的需要适配所有分辨率下的手机页面?我适配了iphone5下的页面大致一样,结果美工会说iphone6plus下怎么和psd元素差这么多(距离什么的),前端就我一个人,美工也不懂前端,知乎不敢发帖,回答里面动不动就是几百行文字,吓死人。大家支支招啊。





   



推荐阅读
  • Python自动化测试入门:Selenium环境搭建
    本文详细介绍如何在Python环境中安装和配置Selenium,包括开发工具PyCharm的安装、Python环境的设置以及Selenium包的安装方法。此外,还提供了编写和运行第一个自动化测试脚本的步骤。 ... [详细]
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • Linux 系统启动故障排除指南:MBR 和 GRUB 问题
    本文详细介绍了 Linux 系统启动过程中常见的 MBR 扇区和 GRUB 引导程序故障及其解决方案,涵盖从备份、模拟故障到恢复的具体步骤。 ... [详细]
  • 1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
  • 深入理解Tornado模板系统
    本文详细介绍了Tornado框架中模板系统的使用方法。Tornado自带的轻量级、高效且灵活的模板语言位于tornado.template模块,支持嵌入Python代码片段,帮助开发者快速构建动态网页。 ... [详细]
  • 本文详细介绍了如何使用Python编写爬虫程序,从豆瓣电影Top250页面抓取电影信息。文章涵盖了从基础的网页请求到处理反爬虫机制,再到多页数据抓取的全过程,并提供了完整的代码示例。 ... [详细]
  • 本文介绍如何通过Windows批处理脚本定期检查并重启Java应用程序,确保其持续稳定运行。脚本每30分钟检查一次,并在需要时重启Java程序。同时,它会将任务结果发送到Redis。 ... [详细]
  • 如何高效创建和使用字体图标
    在Web和移动开发中,为什么选择字体图标?主要原因是其卓越的性能,可以显著减少HTTP请求并优化页面加载速度。本文详细介绍了从设计到应用的字体图标制作流程,并提供了专业建议。 ... [详细]
  • 本文探讨了在使用Selenium进行自动化测试时,由于webdriver对象实例化位置不同而导致浏览器闪退的问题,并提供了详细的代码示例和解决方案。 ... [详细]
  • 如何清除Chrome浏览器地址栏的特定历史记录
    在使用Chrome浏览器时,你可能会发现地址栏保存了大量浏览记录。有时你可能希望删除某些特定的历史记录而不影响其他数据。本文将详细介绍如何单独删除地址栏中的特定记录以及批量清除所有历史记录的方法。 ... [详细]
  • 利用Selenium与ChromeDriver实现豆瓣网页全屏截图
    本文介绍了一种使用Selenium和ChromeDriver结合Python代码,轻松实现对豆瓣网站进行完整页面截图的方法。该方法不仅简单易行,而且解决了新版Selenium不再支持PhantomJS的问题。 ... [详细]
  • Ulysses Mac v29:革新文本编辑与写作体验
    探索Ulysses Mac v29,这款先进的纯文本编辑器为Mac用户带来了全新的写作和编辑环境。它不仅具备简洁直观的界面,还融合了Markdown等标记语言的最佳特性,支持多种格式导出,并提供强大的组织和同步功能。 ... [详细]
  • 本文详细比较了CSS选择器和XPath在Selenium中通过页面结构定位元素的优劣,并提供了具体的代码示例,帮助读者理解两者在不同场景下的适用性。 ... [详细]
  • 本文探讨了如何利用HTML5和JavaScript在浏览器中进行本地文件的读取和写入操作,并介绍了获取本地文件路径的方法。HTML5提供了一系列API,使得这些操作变得更加简便和安全。 ... [详细]
  • Vue 开发与调试工具指南
    本文介绍了如何使用 Vue 调试工具,包括克隆仓库、安装依赖包、构建项目以及在 Chrome 浏览器中加载扩展的详细步骤。 ... [详细]
author-avatar
yuguiping123
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有