TAT.sheran 自适应设计与响应式网页设计
In CSS3,HTML5 on 2015年04月14日 by view: 15,962
5

目前非常流行自适应设计与响应式设计,而且经常让人混淆,自适应设计不应与自适应布局混为一谈,它们是完全不一样的概念。

在这先说明下这两者的异同:

自从移动终端飞速发展以来,各种各样的机型突飞猛进,很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone/iPad版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。

于是,很早就有人设想,能不能"一次设计,普遍适用",让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout)?

2010年,Ethan Marcotte提出了"自适应网页设计"(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。

JX20140226181130

What’s JX.Animate

JX.Animate是由腾讯前端团队AlloyTeam推出的一个JavaScript的CSS3动画库,通过JX插件的形式提供。
JX.Animate可以帮助开发者在JavaScript代码中方便调用和控制CSS3动画,例如动画时长、重复次数、动画缓冲、结束回调等,并且支持播放声音。
TAT.Minren 响应式设计
In CSS3,HTML5,Web开发,移动 Web 开发 on 2014年01月23日 by view: 28,417
9

网上的教程好复杂,我写一个简版的。

简单说呢就针对不同的屏幕分辨率应用不同的CSS样式。比如在电脑、Pad设备上,屏幕比较宽,就可以一行放2个Div。
到了手机上,或者Pad竖着拿的的时候,一行就只放1个Div。
这里有2个关键点:
一是如何在不修改Dom结构的前提下调整布局。
二是如何判断屏幕分辨率并应用对应的CSS。
以上两点都应该不依赖与JS。

故事说起在一个冰冷幽暗的夜晚上,我正思考的十分重要的人生问题,这周末该去那里happy好呢?是宅在家里好呢,或者宅在家里好呢,还是宅在家里好呢?这时,万年隐身的QQ竟然浮起浅色聊天框,我去!不得了,居然是女神主动联系我,女神一定是因为我俊朗的五官,185的模特身材而深深地迷恋上我了,呵呵呵呵呵呵。

你是否关注过浏览、点击图片这个微妙的过程,不同的图片展现、交互方式各带来什么样的观感?本文聚焦于图片浏览这个过程以及如何使用CSS3和第三方库来提升体验。

 

先看下PinterestFlickr等时下热门图片分享类网站。

Pinterest

用户实施了pin这一动作后,图片信息以board形式集合,每个board里的图片呈现规矩的网格布局,这种布局适合于有限集合的排列。

让我们停下想想,为了“分散”的注意力而采用了瀑布流式,那么究竟每张图片用多大尺寸合适,能够降低用户面对满屏图片时的不适感?不同尺寸图片如何排放?在移动端又需要采用什么布局?怎么解决多张图片加载的性能问题?这些问题留待思考。

Pinterest每张图的宽度是固定的,高度也可获取,这样在渲染页面的时候就可以先确定位置而不是等加载到图片资源。

 

最近在学习HTML5CSS3,印象最深的是CSS3的动画功能,不仅有浏览器原生支持,执行效率高,而且免去在js中自己管理timer

本来想写一个图片轮播器练练手,结果在网上发现一个国人写的开源的图片轮播器。不仅效果很酷,而且是女神级的。什么?你问是不是妹子写的?这个我不知道,我说的是这个Demo中的图片都是女神呀,性感火辣,丰满妩媚……咳咳,回正题。

       相信大部分同学都或多或少的对sass和compass有所了解, 但为了扫盲, 我们还是多少介绍一下背景。

       Sass 的官方网站:http://sass-lang.com

       按照sass 的官方介绍: sass 是基于css的一种元语言类型, 作用是为了让css 文档结构化, 整洁,其提供了很多css之外的能力。

       Compass 的官方网站:http://compass-style.org

       一言以蔽之:compass 是基于sass的css处理框架。

       Sass 和 compass 的安装都极其简单 :

  1. 首先安装sass和compass 运行所需的ruby环境, 推荐大家一键式安装:http://rubyinstaller.org/downloads/ (windows)
  2. 执行gem command, 安装sass 和 compass 。

 

在参加飞跃马拉松的时候,小组的项目构思是基于移动社交网络做一个记录用户旅游轨迹和照片的APP应用。

即当用户在旅游过程中,手机会不间断的上报GPS坐标到服务器,服务器会保存所有坐标到数据库,然后用户打开自己的旅游记录后,我们会在手机上创建一个全屏的地图,通过服务器CGI获取所有GPS的坐标点,然后通过这些坐标点绘制出一条线。

TAT.Minren CSS3 的 roate 与 rotateX 的顺序研究
In CSS3,HTML5 on 2012年11月08日 by view: 10,820
2

我觉得CCS3的transform中的学问很深,可以出不少面试题了,之前的文章谈到过perspective属性的位置问题,我们今天看看rotate的顺序,首先看看下面两个CSS3的keyframe动画:

两个动画的起始状态和结束状态都是是一摸一样的(其实就是原始位置),不同的只不过是rotate和rotateX的顺序。但是动画效果却有惊人的差别。

TAT.bizai 图文理解 CSS3 3D Transform
In CSS3,Web开发 on 2012年11月04日 by view: 13,407
7

Minren哥前面已经写了一些关于这方面的blog了,大家也可以在团队blog里面参考。

http://www.alloyteam.com/2012/10/the-css3-transform-perspective-property/

介于只是介绍perspective,没有对css 3d transform其他部分属性介绍说明,下面是我个人对css3 3D的一些个人见解,大神们莫喷。那些rotateX啊,scaleY啊这些大家都能够立刻明白的我就不过多的解析了。主要有几个属性大家可能比较少用或没有理解透的为这部分的主要内容。