1 |
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> |
这个想必大家都知道,当页面在手机上显示时,增加这个 meta 可以让页面强制让文档的宽度与设备的宽度保持 1:1,并且文档最大的宽度比例是 1.0,且不允许用户点击屏幕放大浏览。
目前非常流行自适应设计与响应式设计,而且经常让人混淆,自适应设计不应与自适应布局混为一谈,它们是完全不一样的概念。
自从移动终端飞速发展以来,各种各样的机型突飞猛进,很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个 mobile 版本,或者 iPhone/iPad 版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个 portal(入口),会大大增加架构设计的复杂度。
于是,很早就有人设想,能不能" 一次设计,普遍适用",让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout)?
2010 年,Ethan Marcotte 提出了" 自适应网页设计"(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。
What’s JX.Animate
网上的教程好复杂,我写一个简版的。
故事说起在一个冰冷幽暗的夜晚上,我正思考的十分重要的人生问题,这周末该去那里 happy 好呢?是宅在家里好呢,或者宅在家里好呢,还是宅在家里好呢?这时,万年隐身的 QQ 竟然浮起浅色聊天框,我去!不得了,居然是女神主动联系我,女神一定是因为我俊朗的五官,185 的模特身材而深深地迷恋上我了,呵呵呵呵呵呵。
你是否关注过浏览、点击图片这个微妙的过程,不同的图片展现、交互方式各带来什么样的观感?本文聚焦于图片浏览这个过程以及如何使用 CSS3 和第三方库来提升体验。
先看下 Pinterest、Flickr等时下热门图片分享类网站。
1 |
采用瀑布流式,设计者本意大概是用户对于图片这类非文本信息本身就是非线性浏览的,交错排列的图片集合使焦点最大化分散在页面各个部分。 |
用户实施了 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 的安装都极其简单 :
在参加飞跃马拉松的时候,小组的项目构思是基于移动社交网络做一个记录用户旅游轨迹和照片的 APP 应用。
即当用户在旅游过程中,手机会不间断的上报 GPS 坐标到服务器,服务器会保存所有坐标到数据库,然后用户打开自己的旅游记录后,我们会在手机上创建一个全屏的地图,通过服务器 CGI 获取所有 GPS 的坐标点,然后通过这些坐标点绘制出一条线。
Copyright © 2011-2021 AlloyTeam. All Rights Reserved. Powered By WordPress
粤ICP备15071938号-2