TAT.tennylv 移动 web 问题小结
In CSS3,HTML5,Web开发,经验心得 on 2015年06月14日 by view: 28,818
29

Meta 标签:

这个想必大家都知道,当页面在手机上显示时,增加这个 meta 可以让页面强制让文档的宽度与设备的宽度保持 1:1,并且文档最大的宽度比例是 1.0,且不允许用户点击屏幕放大浏览。

TAT.sheran 浅谈 flexbox 的弹性盒子布局
In CSS3,HTML5 on 2015年05月19日 by view: 13,990
17

     flexbox 是一个新的盒子模型,当你给一个元素使用了flexbox模块,那么它的子元素就会指定的方向在水平或者纵向方向排列。这些子元素会按照一定的比例进行扩展或收缩来填补容器的可用空间。flexbox 有许多很好用的地方,下面就着重讲述一下它的一些使用场景:

 

Example 1: flexbox 等分布局

 

      如果你要实现以下所示的样式,你可能首先想到的是用 float:

 

         图片1 

 

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

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

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

自从移动终端飞速发展以来,各种各样的机型突飞猛进,很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个 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: 33,267
10

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

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

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

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

 

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

Pinterest

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

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

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

 

最近在学习HTML5 CSS3,印象最深的是 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 的坐标点,然后通过这些坐标点绘制出一条线。