最近在和设计沟通关于设计图尺寸大小和前端实际页面尺寸大小不一致的情况,我们的UI设计是使用的iPone6的,(iphone6:    375px*667px  实际像素:750px*1334px)如果按照她给的尺寸直接复制那么你的页面尺寸就是一个放大镜,正常人都知道那是不对的,我在做的时候有两种解决办法: 一.UI设计尺寸定基数 可以和UI沟通在给你的标记尺寸大小时候,让她基于一个数值,一般是16px.给你标注的时候选择保留两个小数,给你标注成px或者rem. 开发者这时候需要配置开发者工具了,

如何使用蓝湖设计稿同时适配PC及移动端 项目需求: 一套代码同时适配PC及移动端 方案: pc端采用px布局,移动端采用rem布局,通过媒体查询(media query)切换 坑: 尝试过使用postcss-pxtorem来自动将px转换rem, 只能满足移动端,无法同时适配PC及移动端,感觉PC端还是使用固定像素px来布局好一点 PC端 设计稿尺寸1920*1080 为了设备不同分辨率的屏幕,可选择将设计稿宽度设置为1440 采用固定尺寸,固定字体,伸缩布局 如果是官网类的网站,采用固定宽度(

规范目的 为提高前端团队开发效率,输出高质量的前端页面代码,提高UI设计还原度,特编写该规范文档.本文档如有不对或者不合适的地方请及时提出. JS代码块 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth =

750px UI 设计稿 App 小程序 H5 rem & vh/vw 在移动端页面开发中,UI 一般会用750px(iphone 6)来出设计稿; 然后要求能够做到页面是自适应屏幕的,这种情况下就可以用 rem或者 vh/vw 等相对单位来做适配; why 750px 是 iPhone6 的物理像素,即屏幕分辨率; 移动端 UI 设计稿是按照 iPhone6 设备的物理像素所给; 通过动态的获取设备独立像素,然后除以设计稿的宽度,然后设置 rem,来动态自适应字体大小; 为什么要乘100,放大

在我开始写移动端页面至今,一直有2个疑问困扰着我,我只知道结果但不知道为什么 问题1:为什么设计师给的设计稿总是640px或750px(现在一般以Phone6为基准,给的750px) 问题2:为什么我们拿到640px和750px的设计稿,在编码的时候都要除以2,    (比如设计稿上有一个图标宽高是40*40,我们需要先除以2,实际编码时候宽高要写成20*20) 之前也在网上搜过一些相关的文章,但无奈大多说的比较晦涩难懂,要嘛就是太过于深奥.也可能是我脑子不够用吧. 不过要完全理解,确实也需要相

React Native中使用的尺寸单位是dp(一种基于屏幕密度的抽象单位.在每英寸160点的显示器上,1dp = 1px),而设计师使用的是px, 这两种尺寸如何换算呢? 官方提供了PixelRatio进行pt到px的转换import {PixelRatio} from 'react-native';const dp2px = dp=>PixelRatio.getPixelSizeForLayoutSize(dp);const px2dp = px=>PixelRatio.roundToNe

基于rem的移动端响应式适配方案(详解) : https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.com/v/53039.html

本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点评:). 1. 问题的引出 最近阅读白树的博文<移动web资源整理>时,他在博文中有一段指出,如果html5要适应各种分辨率的移动设备,应该使用rem这样的尺寸单位,同时给出了一段针对各个分辨率范围在html上设置font-size的代码: html{font-size:10px} @media

从网易与淘宝的font-size思考前端设计稿与工作流   阅读目录 1. 问题的引出 2. 简单问题简单解决 3. 网易的做法 4. 淘宝的做法 5. 比较网易与淘宝的做法 6. 如何与设计协作 7. 总结 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点评:). 1. 问题的引出 最近阅读白树的博文<移动web资源整理>时,他在博文中有一段

iPhone 6/6 Plus 出现后,如何改进工作流以实现一份设计稿支持多个尺寸? 2014-12-05 09:33 编辑: suiling 分类:iOS开发 来源:知乎(pigtwo)  2 2280 适配iPhone 6/6 Plus 招聘信息: 北京会联网招聘 急找苹果ios 软件开发人员 开发.dylib 小插件 覆盖手机信息   移动app开发中多种设备尺寸适配问题,过去只属于Android阵营的头疼事儿,只是很多设计师选择性地忽视android适配问题,只出一套iOS平台设计稿.随

http://mp.weixin.qq.com/s?__biz=MzA4NTQzNTMwOA==&mid=201174413&idx=3&sn=c3fe5b3459bac288e8ecafc9fb038a1d&scene=2&from=timeline&isappinstalled=0#rd 移动app开发中多种设备尺寸适配问题,过去只属于Android阵营的头疼事儿,只是很多设计师选择性地忽视android适配问题,只出一套 iOS平台设计稿.随着苹果发布

这篇文章站在GUI设计师的角度概述了APP从项目启动到切片输出的过程,相当于工作流程的介绍.这里写的不是一种规范,只是一种工作方法,加上技术的更新是非常快的,大家在具体工作中,一定要灵活运用. 这里我们只说iOS系统下的设计,至于Android,因为尺寸太多,涉及的东西比较乱.1 Part 1 项目立项 文件结构 项目名称v1.0 -> 01_源文件psd 02_效果图jpg 03_标注图png 04_标注源文件 05_切片资源png 原型.rar 工具: 界面设计:PS, AI 标注:PxCo

如何在只有一套app设计稿(5s尺寸)切出4和4s尺寸以及安卓系统主流尺寸的图 转自:http://www.zhihu.com/question/23255417   版权归原作者所有 目前ios手机尺寸为320*480px:640*960/1136px:对应的手机型号为iPhone3/3g,iPhone4/4s/5/5s:他们的尺寸关系比为1:2 .android的屏幕众多(分为:idpi 240*320px.mdpi 320*480px.hdpi 480*800px.xhdpi720*128

纯干货!一款APP从设计稿到切图过程全方位揭秘   @BAT_LCK:我本身是一名GUI设计师,所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一写,相当于工作流程的介绍吧.公司不同,流程不尽相同,但是终究还是能有些帮助. 依旧声明:这里写的不是一种规范,只是一种工作方法,大家在具体工作中,一定要灵活运用.另外,技术的更新是非常快的,我写的这些可能某些东西已经和你们的工程师搭档所用的方法不一样了,所以,还是要灵活运用~ 这里我们只说IOS系统下的设计,至于Android,因为

一.路由配置 路由配置跟小程序一样,在入口文件的 config 配置中指定好 pages 通过taro API 跳转,详见导航 // 跳转到目的页面,打开新页面 Taro.navigateTo({ url: '/pages/page/path/name' }) // 跳转到目的页面,在当前页面打开 Taro.redirectTo({ url: '/pages/page/path/name' }) // 传入参数 id=2&type=test Taro.navigateTo({ url: '/pa

@BAT_LCK :我本身是一名GUI设计师,所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一写,相当于工作流程的介绍吧.公司不同,流程不尽相同,但是终究还是能有些帮助. 依旧声明:这里写的不是一种规范,只是一种工作方法,大家在具体工作中,一定要灵活运用.另外,技术的更新是非常快的,我写的这些可能某些东西已经和你们的工程师搭档所用的方法不一样了,所以,还是要灵活运用~ 这里我们只说IOS系统下的设计,至于Android,因为尺寸太多,涉及的东西比较乱,我整理好以后再说吧.

设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作流程一般分为下面两种: 网易做法: 页面开头处引入下面这段代码,用于动态计算font-size (function(doc, win) { var docEl = doc.documentElement, isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), dpr = isIOS ?

机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计.显然不是. 请注意:(以下所有讨论内容和规范均将viewport设定为content=”width=device-width”的情况下) 也就是我们的H5页面前端代码里面必须包含 <meta content=”initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width” name=”view

当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 延伸阅读: 2015年度最值得学习的10个H5案例(各种经典,推荐收藏) 这可能是近半年做得最好的4个H5传播案例 还没搞懂H5营销?他们已经开始在玩“虚拟现实”了! 一个插线板的H5怎么就火了?大家明明是去看周鸿祎的八卦的 那么多手机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是

一.简洁美观——iDoc的PS插件全新界面 iDoc对PS插件的界面进行了全新设计,无论是登录.上传.还是设置界面,都变得更精致.简洁美观,功能分布也非常明确,是一款轻巧且实用的小插件. 二.同步上传——智能检测不对应的设计稿 如果你在PS中删除了几个画板,再次上传设计稿时,勾选插件设置中的“上传全部画板时自动检测不对应的画板”,iDoc插件就会在你上传全部画板后,自动剔除已删除的设计稿,iDoc中的画板数量将和你最新版的设计稿保持一致!这个功能省去了设计师一次次增删页面,手动进行筛选上传的时间

课程来源:https://www.imooc.com/learn/668 一:读设计稿 划分:头部.尾部.公共部分.大概分多少块.logo的重用.列表有哪些.各部分用什么技术实现等等. 二:建立项目目录 三:编写重置样式 不同的标签有着默认的样式,不同浏览器对标签的解析各不相同,重置css样式可以让标签在不同浏览器下产生相同的效果. 网上有许多现成的重置样式表,可以直接借鉴使用.例如: html { -ms-text-size-adjust: 100%; -webkit-text-size-ad