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

[Android] 字体使用dp单位避免设置系统字体大小对排版的影响 以魄族mx3为例,在设置->显示->字体大小中能够选择字号大小例如以下图: 图1. 魄族mx3 会导致软件在有固定定高的界面中"已关联"显示不全然. 例如以下图. 图2. 字体显示不全然 解决此问题为把TextView中的字体大小的单位由sp改为dp就可以. 此样例展示的仅仅是因为字体大小设置后导致的高度上内容无法全然显示.还有还有一种情况是因为字体变大,本来仅仅要一行就能够显示全然的内容如今折行为两行.

Photoshop如何安装蓝湖插件 下载蓝湖插件 直通车:蓝湖Photoshop插件: Photoshop版本要求为cc2017以上, 下载后是一个zip格式的文件,我们需要解压. 下载的文件 解压后的文件 安装蓝湖 解压完成后 windows系统用户双击.exe文件开始自动安装 mac系统用户双击macOS开头的应用程序开始自动安装 安装成功后重启Photoshop 安装完如何上传? 插件再头顶的窗口--扩展功能--蓝湖 触发后 这里是已经登录了 点击上传全部画板

蓝湖 UI 设计稿上如何生成渐变色和复制渐变色 Sketch 生成渐变色 不要上传图片,切图 如果是切图,切图模式下就不会生成 css 代码了 复制渐变色 OK .button { width: 284px; height: 88px; background: linear-gradient(360deg, #FF5C5C 0%, #FB9657 100%); box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.16); border-radius: 4px;

对于开发者,经常会使用,学习到各种环境语言和工具 我们不只是在不断的在搬运知识,更多时候我们也是在 分享我们学到的"新知识", 当我们有幸觉得自己发现了新的知识与技术时,作为分享者,幸运者,肯定会第一时间发布出来. 当我作为开发者,体验到了最新蓝湖3.0版本发布,随笔写下一篇很差劲的分享时,却遭到csdn 广告原因的审核失败. 我一篇文章里面只提到使用的好处,及小技巧,夸赞了新版本的畅爽之处,没有链接,没有入口也不行 ​我失望了~ 我感觉应该 用自己搭建的博客"畅所欲言了~&

前言   本篇是程序员仿照ui设计创建psd且切图五个按钮效果上传至蓝湖,本篇篇幅较长,整体完成一个目标,没有分篇幅了.   前提条件   已经安装了PS,已经在PS上安装了蓝湖插件,并且曾经已经上传过,若没有装PS的则自己装PS,没有装蓝湖插件请去蓝湖官网查询一下,可以安装插件一键上传.   程序员切图要突破的必要技能   以下技能,就是算装了PS,会一些基本的调图,但是实际不熟,需要将PS的几个与切图相关的功能熟练. 指定大小 :在PS中,将新建图标切换成指定大小,并且切图导出. 缩放:在P

使用canvas的api时, 使用的都是绝对数值, 如: 方法传参是坐标位置,不带单位,如ctx.translate(10,10); 那么此时, 我就需要将rem或rpx 转换成 px; 首先, 获取设备宽度 h5: var clientWidth = document.documentElement.clientWidth; 小程序没有document对象, 所以要使用小程序自带的api获取设备宽度 var clientWidth = wx.getSystemInfoSync().window

借助API wx.getSystemInfoSync(); 通过API可获取的值: // 在 iPhone6 下运行: var systemInfo = wx.getSystemInfoSync(); console.log(systemInfo.windowWidth); // 输出 375(单位 px) // 在 iPhone6 Plus 下: var systemInfo = wx.getSystemInfoSync(); console.log(systemInfo.windowWidt

dp 设备独立像素 ,也叫dip, device independent pixle. 比如同样在1英寸大小的屏幕上,高密度的屏幕可显示100个像素点,而低密度的屏幕只能70个点. 用了dp之后,只要设置一个dp的大小,这个dp的大小是个固定的值(固定大小区域), 在不同的屏幕上都要显示这么大的区域,至于用多少个像素点来显示,它不在乎.

DP 这个是最常用但也最难理解的尺寸单位.它与“像素密度”密切相关,所以 首先我们解释一下什么是像素密度.假设有一部手机,屏幕的物理尺寸为1.5英寸x2英寸,屏幕分辨率为240x320,则我们可以计算出在这部手机的屏幕上, 每英寸包含的像素点的数量为240/1.5=160dpi(横向)或320/2=160dpi(纵向),160dpi就是这部手机的像素密度,像素密度的单位dpi是Dots Per Inch的缩写,即每英寸像素数量. 横向和纵向的这个值都是相同的,原因是大部分手机屏幕使用正方形的像素

此链接    http://blog.csdn.net/xiaodongrush/article/details/29560431 1. 要开发一款Android APP,设计师和开发要约定哪些事情? 首先,选择一款主流机型. 然后,设计师依据该机型的屏幕尺寸设计效果图,给出px单位的标注.     最后.开发依据该机型,能够算出px与dp的换算方法.依据px单位的标注,设置为dp为单位的标注.     备注:1dp=1dip=1sp,对于一般长宽dp或者dip都能够,sp是字体专用单位.在操作

[转]http://www.cnblogs.com/bjzhanghao/archive/2012/11/06/2757300.html 在调整布局的时候,某些控件的大小需要设置单位: px: 即像素,1px代表屏幕上一个物理的像素点: px单位不被建议使用,因为同样100px的图片,在不同手机上显示的实际大小可能不同,如下图所示(图片来自android developer guide,下同). 偶尔用到px的情况,是需要画1像素表格线或阴影线的时候,用其他单位如dp会显得模糊. dp: 这个是

很多UI工程师为了适配IOS,常常拿IOS手机作用参考模型,设计出来的UI稿只有PX标注的.他们也不懂Android的dp和sp单位是怎么回事.这个时候我们Android工程师如果不注意怎么转换的话,就可能开发出很难看的界面. 那么如何才能正确的将UI稿的上的px转换成android的dp单位呢?这个取决于UI设计师的设计稿基于什么设备. 一般安卓开发者只要适配一款主流设备,比如Nexues5,其它大部分手机都可以适配.如果要精确适配,就要针对不同分辨率进行单独适配.为了简单起见,我们只需要适配

rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.   微信小程序尺寸单位 rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx

相信每个Android新手都会遇到这个问题,希望这篇帖子能让你不再纠结. px: 即像素,1px代表屏幕上一个物理的像素点: px单位不被建议使用,因为同样100px的图片,在不同手机上显示的实际大小可能不同,如下图所示(图片来自android developer guide,下同). 偶尔用到px的情况,是需要画1像素表格线或阴影线的时候,用其他单位如dp会显得模糊. dp: 这个是最常用但也最难理解的尺寸单位.它与“像素密度”密切相关,所以首先我们解释一下什么是像素密度.假设有一部手机,屏幕

相信每个Android新手都会遇到这个问题,希望这篇帖子能让你不再纠结. px: 即像素,1px代表屏幕上一个物理的像素点: px单位不被建议使用,因为同样100px的图片,在不同手机上显示的实际大小可能不同,如下图所示(图片来自android developer guide,下同). 偶尔用到px的情况,是需要画1像素表格线或阴影线的时候,用其他单位如dp会显得模糊. dp: 这个是最常用但也最难理解的尺寸单位.它与“像素密度”密切相关,所以首先我们解释一下什么是像素密度.假设有一部手机,屏幕

文章来源:http://www.cnblogs.com/bjzhanghao/archive/2012/11/06/2757300.html px:像素,一个像素点,1px代表屏幕上一个物理的像素点: Android中尽量不要使用px单位,同样100px的图片,在不同手机上显示的实际大小可能不同,如下图所示: dp: 这个是最常用但也最难理解的尺寸单位.它与“像素密度”密切相关,所以首先我们解释一下什么是像素密度.假设有一部手机,屏幕的物理尺寸为1.5英寸x2英寸,屏幕分辨率为240x320,则

rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应. 规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px 设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)iPhone5      1rpx = 0.42px     1px = 2.34pxiPhone6      1rpx = 0.5px 1px = 2rpxiPhon

rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.   微信小程序尺寸单位 rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx

Android的px.dp和sppx: 即像素,1px代表屏幕上一个物理的像素点:偶尔用到px的情况,是需要画1像素表格线或阴影线的时候. dp: 这个是最常用但也最难理解的尺寸单位.它与“像素密度”密切相关,所以首先我们解释一下什么是像素密度.假设有一部手机,屏幕的物理尺寸为1.5英寸x2英寸,屏幕分辨率为240x320,则我们可以计算出在这部手机的屏幕上,每英寸包含的像素点的数量为240/1.5=160dpi(横向)或320/2=160dpi(纵向),160dpi就是这部手机的像素密度,像素