彩云Sky

ui设计,交互设计,用户体验,前端工程师

微信公众号:彩云译设计(caiyunyisheji)

怎样方便的处理CSS3属性前缀问题

今天在写css3的过程中,遇到要对css3属性加上各大浏览器的前缀,这其实是附加工作,而且又不大记得哪些需要加前缀,哪些不用加,头疼。

那如何方便的解决这一问题

先了解下为什么要加css3前缀的问题。

浏览器厂商以前就一直在实施CSS3,但它还未成为真正的标准。为此,当一些CSS3样式语法还存在波动时,它们提供针对浏览器的前缀。现在主要流行的浏览器内核主要有:

Trident内核:主要代表为IE浏览器

Gecko内核:主要代表为Firefox

Presto内核:主要代表为Opera

Webkit内核:产要代表为Chrome和Safari

而这些不同内核的浏览器,CSS3属性(部...

2016-06-01

解决图片缩小变模糊的问题

今天在做网页设计输出图片时发现当图片缩小会发生严重的锯齿问题,如


图1,问题图片

开始的解决方案是在不影响布局排版的情况下,尽可能的放大些图片,但是发现还是不能很好的满足需要。

然后联想到苹果官网也有很多类似的手机模型图片,如


图2,苹果官网截图

发现他们的图片是清晰的,说明并不是因为把图片斜切会造成锯齿,应该还有更好的方案。

再查看源码发现,


图3,苹果官网前端源码测试图

发现显示的图片大小也并非特别大,比问题图片的尺寸还要小一些,但是依然清晰,说明大小方面也有更好的解决方案才对。然后检查了下苹果官网的图片资源,发现其原图是非常大的,只是代码实现了其缩小尺寸,故猜...

2016-05-17

网页响应式与网页自适应的区别

针对响应式网页设计,还有一个概念叫自适应网页设计,很多人容易混淆。所以打算好好的理清两者之间的区别。

国内一直把RWD(Responsive web design)翻译为响应式设计或自适应设计,其实翻译的中文意思已经把RWD和AWD给混淆掉了,国人应该正视这个问题,因为RWD也是有缺陷的,要根据实际情况使用这种模式。

自适应设计是响应式设计中的一个子集。

Responsive design (响应式设计):建立一个网页,通过CSS Media Queries,Content-Based Breakpoint(基于内容的断点)等技术来改变网页的大小以适应不同分辨率的屏幕。

图1,响应式网

2016-04-28

彻底了解css中的长度单位(2016年版)

在写前端代码的时候经常会被各种各样的css长度单位所困惑,在这里根据自己的经验以及网上找到的参考资料做一个整理。

  1. em

  2. rem

  3. vmin,vmax

  4. ex,ch

  5. vh,vw

  6. pt

  7. px

  8. ex

  9. pc

  10. in

  11. mm

  12. cm


【1】em

实例:

<style type="text/css">
    body {font-size: 12px;}
    div  {font-size: 1.5em;}
</style>
<body>...

2016-04-27

VTM项目总结

沉淀与总结才能让项目高效的交接下去,同时也能使自己收获更多。

VTM项目算是自己参与的一个相对比较完整的项目,在项目里主要负责设计,交互还有前端实现方面的职责。最近得闲,把一直没空整理的东西好好的做个记录,写下自己的收获与感想,也方便团队其他成员执行。

项目流程

市场行情的调研——需求收集整理——草图交流——低保真原型图——评审确定完整的交互流程,业务元素——效果图设计——前端实现——配合后端修改——测试——项目上线。

VTM市场定位

客户角度:便利的各类自助业务。通过视频的方式,减少排队等待,能满足任何时间点,任何地方(不需要营业厅)即可办理原需要去营业厅才可以办理的例如开卡,产品...

2016-04-26

前端的一些问题及解决(1)

昨天在给新人修改前端代码的过程中发现一些细节问题,然后仔细研究了下,做下总结,方便团队成员学习。

项目背景:

使用框架bootstrap,做的一个web版的自适应网站。

问题一:如何扩大多选按钮或者单选按钮的点击范围?

问题重现,

只是单纯的增加选框的大小,不希望直接点击整个列表项选择,因为点击产生的事件是进入列表项查看具体邮件内容。

思考过程,

1、很自然的先想到直接增加checkbox 的width和height

但是实际中发现只是增加了可点击范围,实际的选框大小并没有变化,还导致了整体的布局发生改变。

2、通过点击事件动态改变checked和unchecked背景图来实...

2016-04-26

© 彩云Sky | Powered by LOFTER