Category: Div / Css / XML / HTML5 / SVG

移动开发需要知道的像素知识『多图』

像素(Pixel)对于WEB开发者来说很是熟悉,在PC互联网时代没少与其打交道。进入移动互联网之后,随着移动设备屏幕的解析度越来越高,衍生了一些关于屏幕和像素的一些新概念,比如DPI,DP,PT,Retina,4K等等,本文对这些概念做一个简单的介绍。 DPI与PPI DPI(Dots Per Inch)是印刷行业中用来度量空间点密度用的,这个值是打印机每英寸可以喷的墨汁点数。计算机显示设备从打印机中借鉴了DPI的概念,由于计算机显示设 备中的原子单位不是墨汁点而是像素,所以就创造了PPI(Pixels Per Inch),这个值是屏幕每英寸的像素数量,即像素密度(Screen density)。由于各种原因,目前PPI(主要是iOS)和DPI(比如在Android中)都会用在计算机显示设备的参数描述中,不过二者的意思是一样的,都是代表像素密度。 高PPI屏幕显示的元素会比较精细(看起来会比较小),低PPI屏幕显示的元素相对来说就比粗糙(看起来会比较大),我们通过一幅图来看看在不同PPI下元素显示的区别: HD与4K 现在移动设备、智能电视宣传最多的两个关键词估计就是HD、4K,这二者都是用来描述显示设备分辨率的标准,到底二者之间有什么区别? HD(High-Definition)的分辨率要高于1280x720px或者720p。 Full HD的分辨率要高于1920x1080px,目前是主流电视以及高端手机(比如Galaxy SIV, HTC one, Sony Xperia Z, Nexus5等)采用的是这个分辨率。 4K(也叫做Quad HD或者Ultra HD)的分辨率从3840×2160起步,主要是现在高端电视的分辨率;其还有一个更高的4096×2160的标准,主要用于电影放映机或者专业相机。 Retina Retina display即视网膜屏幕,是苹果发布iPhone 4时候提出的,之所以叫做视网膜屏幕,是因为屏幕的PPI太高,人的视网膜无法分辨出屏幕上的像素点。iPhone 4/S的PPI为326,是iPhone 3G/S的两倍,如下图: 由于屏幕在宽和高的像素数量提高了整整一倍,所以之前非Retina屏幕上的一个像素渲染的内容在Retina屏幕上会用4个像素去渲染:1x1px(non Retina) = 2x2px(Retina),这样元素的内容就会变得精细,比如: 注意,Retina display是苹果注册的命名方式,其他厂商只能使用HI-DPI或者其他的命名方式,不过意思都是一样的,就是屏幕的PPI非常高。 DP/PT/SP 随着移动设备屏幕PPI的不断提高,对于开发者来说以前用物理像素(Physical Pixel)来度量显示元素的方法已经不奏效了。为了解决这个问题,两大平台都提出了抽象像素的概念:iOS叫做PT(Point,显示… Read More

HTML5: 两个viewport的故事(第一部分)

英文:http://www.quirksmode.org/mobile/viewports.html 翻译:http://weizhifeng.net/viewports.html 在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如<html>元素,也包括窗口和屏幕。 这篇文章是关于桌面浏览器的,其唯一的目的就是为移动浏览器中相似的讨论做个铺垫。大部分开发者凭直觉已经明白了大部分桌面浏览器中的概念。在移动 端我们将会接触到相同的概念,但是会更加复杂,所以对大家已经知道的术语做个提前的讨论将会对你理解移动浏览器产生巨大的帮助。 概念:设备像素和CSS像素 你需要明白的第一个概念是CSS像素,以及它和设备像素的区别。 设备像素是我们直觉上觉得「靠谱」的像素。这些像素为你所使用的各种设备都提供了正规的分辨率,并且其值可以(通常情况下)从screen.width/height属性中读出。 如果你给一个元素设置了width: 128px的属性,并且你的显示器是1024px宽,当你最大化你的浏览器屏幕,这个元素将会在你的显示器上重复显示8次(大概是这样;我们先忽略那些微妙的地方)。 如果用户进行缩放,那么计算方式将会发生变化。如果用户放大到200%,那么你的那个拥有width: 128px属性的元素在1024px宽的显示器上只会重复显示4次。 现代浏览器中实现缩放的方式无怪乎都是「拉伸」像素。所以,元素的宽度并没有从128个像素被修改为256个像素;相反是实际像素被放大了两倍。形式上,元素仍然是128个CSS像素宽,即使它占据了256个设备像素的空间。 换句话说,放大到200%使一个CSS像素变成为一个设备像素的四倍。(宽度2倍,高度2倍,总共4倍) 一些配图可以解释清楚这个概念。这儿有四个100%缩放比的元素。这儿没有什么值得看的;CSS像素与设备像素完全重叠。 现在让我们缩小。CSS像素开始收缩,这意味着现在一个设备像素覆盖了多个CSS像素。 如果你进行放大,相反的行为会发生。CSS像素开始变大,现在一个CSS像素覆盖了多个设备像素。 这儿的要点是你只对CSS像素感兴趣。这些就是那些控制你的样式表如何被渲染的像素。 设备像素对你(译者:指的是开发者)来说基本上没用。但是对于用户不一样;用户将会放大或者缩小页面直到他能舒服的阅读为止。无论怎样,缩放比例对你不会产生影响。浏览器将会自动的使你的CSS布局被拉伸或者被压缩。 100%缩放 我是以假设缩放比例为100%来开始这个例子的。是时候需要更加严格的来定义一下这个100%了: 在缩放比例100%的情况下一个CSS像素完全等于一个设备像素。 100%缩放的概念在接下来的解释中会非常有用,但是在你的日常工作中你不用过分的担心它。在桌面环境上你将会在100%缩放比例的情况下测试你的站点,但即使用户放大或者缩小,CSS像素的魔力将会保证你的布局保持相同的比率。 屏幕尺寸 screen.width/height 意义:用户屏幕的整体大小。 度量单位:设备像素。 浏览器错误:IE8以CSS像素对其进行度量,IE7和IE8模式下都有这个问题。 让我们看一些实用的度量。我们将会以screen.width和screen.height做为开始。它们包括用户屏幕的整个宽度和高度。它们的尺寸是以设备像素来进行度量的,因为它们永远不会变:它们是显示器的属性,而不是浏览器的。 Fun! 但是这些信息跟对我们有什么用呢? 基本上没用。用户的显示器尺寸对于我们来说不重要-好吧,除非你想度量它来丰富你的web统计数据库。 窗口尺寸 window.innerWidth/Height 意义:浏览器窗口的整体大小,包括滚动条。 度量单位:CSS像素。 浏览器错误:IE7不支持。Opera以设备像素进行度量。 相反,你想知道的是浏览器窗口的内部尺寸。它告诉了你用户到底有多少空间可以用来做CSS布局。你可以通过window.innerWidth和window.innerHeight来获取这些尺寸。 很显然,窗口的内部宽度是以CSS像素进行度量的。你需要知道你的布局空间中有多少可以挤进浏览器窗口,当用户放大的时候这个数值会减少。所以如果用户进行放大操作,那么在窗口中你能获取的空间将会变少,window.innerWidth/Height的值也变小了。 (这儿的例外是Opera,当用户放大的时候window.innerWidth/Height并没有减少:它们是以设备像素进行度量的。这个问题在桌面上是比较烦人的,但是就像我们将要看到的,这在移动设备上却是非常严重的。)… Read More

HTML5: 两个viewport的故事(第二部分)

英文:http://www.quirksmode.org/mobile/viewports2.html 翻译:http://weizhifeng.net/viewports2.html 在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如<html>元素,也包括窗口和屏幕。 这篇文章我们来聊聊关于移动浏览器的内容。如果你对移动开发完全是一个新手的话,我建议你先读一下第一篇关于桌面浏览器的文章,先在熟悉的环境中进行下热身。 移动浏览器的问题 当我们比较移动浏览器和桌面浏览器的时候,它们最显而易见的不同就是屏幕尺寸。为桌面浏览器所设计的网站在移动浏览器中显示的内容明显要少于在桌面浏览器中显示的;不管是对其进行缩放直到文字小得无法阅读,还是在屏幕中以合适的尺寸只显示站点中的一小部分内容。 移动设备的屏幕比桌面屏幕要小得多;想想其最大有400px宽,有时候会小很多。(一些手机声称拥有更大的宽度,但是它在撒谎-或者也可以说它给我们提供了没用的信息。) 平板设备中的像素中间层会在桌面环境和移动环境的缺口之间架起一段桥梁,比如像iPad或者传说中HP基于webOS所研发的设备,但是这并没有改变根本问题。站点必须也能在移动设备上工作,所以我们不得不让它们能在小尺寸的屏幕上正常显示。 最重要的问题在CSS上,特别是viewport的尺寸。如果我们照搬桌面环境的模式,那么我们的CSS就要立马熄火了(译者:即显示混乱)。 让我们看下之前sidebar为width: 10%的例子。如果移动浏览器想要实现跟桌面浏览器一样的行为,它们最多为元素设置40px的宽度,但是这太窄了。你的流式布局会看起来被挤乱了。 解决这个问题的一个方法是为移动浏览器建立一个特定的站点。先抛开你是否有必要这么做这个基本问题,而实际的情况是只有很少的网站拥有者真正知道要对移动设备做特殊的处理。 移动浏览器厂商想给它们的客户尽可能的提供最好的体验,这现在指的就是「尽可能的跟桌面一样」。因此耍一些花招是必要的。 两个viewport viewport太窄了,以至于不能正常展示你的CSS布局。明显的解决方案是使viewport变宽一些。无论如何,需要把它分成两部分:visual viewport和layout viewport。 George Cummins在Stack Overflow上对基本概念给出了最佳解释: 把layout viewport想像成为一张不会变更大小或者形状的大图。现在想像你有一个小一些的框架,你通过它来看这张大图。(译者:可以理解为「管中窥豹」)这个 小框架的周围被不透明的材料所环绕,这掩盖了你所有的视线,只留这张大图的一部分给你。你通过这个框架所能看到的大图的部分就是visual viewport。当你保持框架(缩小)来看整个图片的时候,你可以不用管大图,或者你可以靠近一些(放大)只看局部。你也可以改变框架的方向,但是大图 (layout viewport)的大小和形状永远不会变。 也看一下Chris给出的解释。 visual viewport是页面当前显示在屏幕上的部分。用户可以通过滚动来改变他所看到的页面的部分,或者通过缩放来改变visual viewport的大小。 无论怎样,CSS布局,尤其是百分比宽度,是以layout viewport做为参照系来计算的,它被认为要比visual viewport宽。 所以<html>元素在初始情况下用的是layout viewport的宽度,并且你的CSS是在屏幕(译者注:宽度等于layout viewport的虚拟屏幕)好像明显比电话屏幕宽(物理屏幕)要宽的假设基础上进行解释的。这使得你站点布局的行为与其在桌面浏览器上的一样。 layout viewport有多宽?每个浏览器都不一样。Safari iPhone为980px,Opera为850px,Android WebKit为800px,最后IE为974px。… Read More

CSS3: 移动端开发中 max-device-width 与 max-width 的区别

翻译自stackoverflow.com,源地址:http://stackoverflow.com/questions/6747242/what-is-the-difference-between-max-device-width-and-max-width-for-mobile-web 有同学需要开发web页在iphone/android手机上访问,想问max-device-width 与 max-width 有什么区别,他打算针对不同的屏幕大小加载不同的样式,就像下面这样: @media all and (max-device-width: 400px) @media all and (max-width: 400px) 这两者有什么不同? max-width 指的是显示区域的宽度,比如浏览器的显示区域宽度 (max-width is the width of the target display area, e.g. the browser) max-device-width 指的是设备整个渲染(显示)区域的宽度,比如设备的实际屏幕大小,也就是设备分辨率  (max-device-width is the width of the device’s entire… Read More

CSS:媒体查询 CSS3 Media Queries

定义和使用 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。 浏览器支持 表格中的数字表示支持 @media 规则的第一个浏览器的版本号。 CSS 语法 @media mediatype and|not|only (media feature) { CSS-Code; } 你也可以针对不同的媒体使用不同 stylesheets : <link rel=”stylesheet” media=”mediatype and|not|only (media feature)” href=”mystylesheet.css“> 媒体类型 值 描述 all 用于所有设备 aural 已废弃。用于语音和声音合成器 braille… Read More

CSS: SASS用法指南 (附视频)

  学过CSS的人都知道,它不是一种编程语言。 你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事。 很自然地,有人就开始为CSS加入编程元素,这被叫做“CSS预处理器”(css preprocessor)。它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。 各种”CSS预处理器”之中,我自己最喜欢SASS,觉得它有很多优点,打算以后都用它来写CSS。下面是我整理的用法总结,供自己开发时参考,相信对其他人也有用。 ============================================ 一、什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。 本文总结了SASS的主要用法。我的目标是,有了这篇文章,日常的一般使用就不需要去看官方文档了。 二、安装和使用 2.1 安装 SASS是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样使用。只是必须先安装Ruby,然后再安装SASS。 假定你已经安装好了Ruby,接着在命令行输入下面的命令: gem install sass 然后,就可以使用了。 2.2 使用 SASS文件就是普通的文本文件,里面可以直接使用CSS语法。文件后缀名是.scss,意思为Sassy CSS。 下面的命令,可以在屏幕上显示.scss文件转化的css代码。(假设文件名为test。) sass test.scss 如果要将显示结果保存成文件,后面再跟一个.css文件名。 sass test.scss test.css SASS提供四个编译风格的选项: * nested:嵌套缩进的css代码,它是默认值。 * expanded:没有缩进的、扩展的css代码。 * compact:简洁格式的css代码。 * compressed:压缩后的css代码。 生产环境当中,一般使用最后一个选项。… Read More

九张 Gif 图回顾 Web 设计的 25 年历史

原文出处: fastcodesign   译文出处:码农网 – 小峰 Froont,一家为web设计师制作工具的旧金山公司,用9个GIF格式动画来表现网页设计在过去25年的发展历程。如果你想知道为什么CSS这么重要,为什么Flash会逐渐淘汰,这些动画图或许能让你一窥究竟。 网页设计的单色时代,约1989年。想想Lynx和其他以Unix为基础的web浏览器,这些浏览器只会通过网络从这个终端到另一个终端一个字一个字地蹦出来。没有图形用户界面,只有一串字母和一个闪烁的光标。 现代化的开始,约1995年。第一个浏览器,例如Mosaic,允许设计人员在网站上显示图片,但是唯一的方法是将这些网页元素丢进不雅的表格布局中。由于这真的很难精确定位,所以设计师得琢磨地非常清楚如何写好表格嵌套表格再嵌套表格的代码以便正确显示内容。 幸运的是,JavaScript出现了,为设计师提供了很大的便捷。Flash让我们创建动态网站的设计更为简便:例如,弹出窗口和在页面上动态修改内容顺序。但是相较于本地HTML,JavaScript速度很慢。 尽管Flash也曾风靡一时,但是现在几乎已经被HTML5干掉了,但是在1996年,它代表了网页设计的一个新高度:能够让设计师按他们自己的方 式使得页面生动起来。这也是Froont飞出页面和开场动画等的黄金时代。但是,Flash会占用计算机大量的处理资源,这也使得它成为一种特别不友好的 技术,尤其是对于移动设备例如笔记本电脑和智能手机而言。 CSS,首次发布于1998年,解决了很多早期的web设计问题。通过将网站美观度从网页内容中剥离出来,设计师终于可以按照自己的想法制作或者为客户定制网页了。虽然最早的CSS版本不是非常灵活,但是现在的CSS已然成为了设计师需要掌握的最重要的网络技术。 2007年iPhone的问世给设计人员带来了一个全新的难题:如何在智能手机这个更小的屏幕上设计网页?一开始设计人员想到的是使用一种网格系统,这种网格系统可以根据设备屏幕的尺寸将网页分割成若干列。 2010年,对于如何在移动设备显示网页的问题,Ethan Marcotte想到了另一种解决方案:响应式设计。 在响应性设计之后,一种撇去华丽效果重视内容的扁平化设计也出来了。这种设计简化了视觉元素,通过突出漂亮的字体来创建web体验,而且显示在任何设备上的效果都非常棒。 至于未来会如何?Froont表示,更好的web设计还在研究开发中。以后,设计人员将不需要再担心浏览器的兼容性问题,各种适用于任何设备的工具也都随手可得。以后的技术将不会再成为设计的限制,设计师可以集中精力解决UI和UX问题,而不是把时间浪费在排除故障上。 如果你喜欢这些动画,欢迎为我点赞。   本文: 九张 Gif 图回顾 Web 设计的 25 年历史… Read More

设计: 从登录开始

原文出处: 迅雷CUED 登录? 两个输入框加一个按钮?还能怎么做? 那就先来看看为什么而做? 就数据而言,网站的流量仍是大量的匿名用户带来的。我们无法根据请求的任何方面(ip地址,用户代理等)准确识别来自同一人的连续请求。 不能识别,自然无法对其分类进而转化挖掘,获取网站所需的价值。 互联网服务于人,要开发一个真正令人动心的网站,我们必须触达到浏览器后面那些活生生的人。 他们是谁?他们想要什么? 我们如何服务他们? 以下是4种具有代表性的用户识别方法,我们来看一下它们的优劣: ip地址:IP地址是最容易获取到的信息。但用它来标识唯一用户会有很大弊端,伪IP、代理、动态IP、局域网共享同一公网IP出口等情况都会干扰获取的IP地址的唯 一性和准确性。 IP+User Agent :多 个信息联合确定用户身份。对于用户而言,当使用相同的终端浏览网站时,user agent的信息是相对固定的,固定的操作细水长流断裂,相对固定的浏览器,这种方式可以适当提高IP代理、公用IP这类情况下的用户分辨度,当还是同样 避免不了动态IP和VPN等IP变动的情况。 cookie:Cookie是网站以一小段文本的形式存放在用户本地终端的信息,以便网站之后的读取。 Cookie几乎能够唯一对应到用户的访问终端,但不像IP地址都能获取到,Cookie需要预先写入访问终端,如果用户禁用Cookie,vfb么这种 用户识别机制就会失效,当用户执行了清理Cookie或者重装系统等操作时,Cookie同样也会丢失。 User ID:用户ID与上述的区别就是绑定的不再是设备而是用户本身,具有唯一的识别性。 同时,很多网站把这个用户ID写入到Cookie中以便用户下次访问时直接判别用户身份而完成“自动登录”的功能。 用户ID还可以串联用户的访问记录数据和CRM及后台其它的用户数据,为之后的关联和分析提供了便利。(以上用户识别方法摘取自《网站分析实战》) 另外还可以获取MAC地址,SIM卡IMIS号(移动端优化可用上),也可以作为识别用户唯一身份的标识。 设计思路和过程: 现在大家都在说“以用户为中心”。 用户可能会因为“以用户为中心”的设计所给予的关注而比以往的感觉好一些,但把们置于开发过程的中心未必能给他们带来更好的产品。我们要理解的并不是用户,而是使用。 关注用户此刻所要完成的任务,以及我们怎样才能以最佳方式支持其完成。 所以我们要考虑如何来支持用户达成每一个目标,而不会干扰或妨碍他们。同时,再把这些完全不同的部分凝聚成整体。 以下就是具体做了哪些优化: 1、使任务更明确: 登录的主线任务就是登录输入框和提交按钮,加大处理,让其任务更突出,去除图的干扰,使流程清楚,用户可以直线思维操作, 用户名>密码>登录 一气呵成快捷地完成登录。 原有的“忘记密码,忘记账号以及记住我”不属于主线任务,其实放在哪里不重要,重要的是我们需要给表现成“相关任务”,故移至一旁弱化表现。 删除“忘记账号”(忘记密码可以找回,忘记账号并不能解决,现有线上的处理方式是跳转去找回密码页,毫无意义)。 2、使输入更快捷高效,提高易用性… Read More

设计: 未来Web设计的7大趋势

原文出处: Medium   译文出处:朵璞 1. 手势取代点击 我们都已经忘记滚动条曾经是有多麻烦,大多数用户都得煞费苦心地把鼠标移至屏幕右侧来移动这古老的滚动条: 作为一名专业人士,想必你一定用过鼠标滚轮、光标键或触控板,那么你就已经超越了许多用户了。 在当今这个时代,滑动已取代了点击。手机用户轻松滑动手指即可随意滚动页面,相对而言,要精准地点击某一点反倒是变得困难了——完全和以前在电脑上的操作相反。 因此,我们应将网站体验的首要重点放在滚动上,点击为辅。当然,这一特点已经随处可见: 随着手机用户的规模日益庞大,现代化网站都开始尽量减少点击,增加滚动。我们会发现链接越来越少,按钮因为其更大的“点击”区域,出现的频率越来越高。为适应滚动趋势,页面也变得越来越长。 那些多页网站意识到这一点后,开始纷纷合并页面,将单个页面延长,或者干脆像 TIME 杂志,直接做成无限滚动页面: 将来是否能在手表上浏览网页还尚未可知,不过用手势来进行操作,这一点是肯定的。 2. 彻底淘汰网页折叠线 在页面滚动变得如此普遍的时代,各种设备又有着不同的尺寸,网页中的“折叠线”将不再被列入讨论范畴。 设计师们无需再将所有内容都挤在页面的最上端。这一改变便引出了 Medium 曾经推广过的设计趋势——全屏图片加标题,滚动后才可见页面主体内容: 有了这长长的滚动页面,设计师们终于有机会实现梦寐以求的杂志效果:尽情使用美丽的大图片。在2015年的网站设计中,我们尤其可以看到利用大面积纵向空间来展现图片的方式。 3. 操作更快捷 网站更简化 现在人人都是网站高手,业余选手也似乎有了专业素质:使用多个标签页及滑动返回上页等都不在话下。 这些特点所带来的结果便是一切都变得更快速了,大家的耐心值都日益降低。试问如何才能惹恼一个好脾气的人呢?很简单,只要稍稍减慢网速,便立刻引爆。 现今的网站所面临的挑战不只是让加载速度更快(技术问题),而且要让页面能更快地被受众所理解。一款无法弄懂的设计和超慢的载入速度具有同等的恼人效果。 简洁的设计更易被理解,也就意味着更讨人喜欢。我们很容易就能区分出下方的两款设计,哪款更现代。现代化网站可以更快帮助用户理解使用方式: 仿真设计被淘汰的主要因为用户敏锐度更高,耐心值降低,杂乱的设计只能减缓一切速度。 移动应用以其美观的极简界面击败了绝大多数网站,事实证明简约界面的表现更佳。 扁平化设计只是一个开端,它所真正代表的是简约和即时性,希望这一走向可以在2015年发展得更深入。 4. 像素的消亡 我们曾经能清楚的知道组成一张分辨率为72 dpi的图片需要多少像素。如今,人们对这一概念越来越模糊。 随着响应式网站的出现,相对于固定数值,我们更趋向于使用网格和百分比。然而,位图图像仍然存在。 几乎所有网站中使用的图片分辨率都只有现代显示器分辨率的一半,并且不按比例调整大小。对于 Retina 显示器和现代化浏览器而言,矢量图形之风正渐渐崛起。 这一风潮在图标字体以及谷歌材料设计中就已见端倪。具此特点的网站通常都具有更快的加载速度,图标在放大后也不损失质量,是现代化浏览器的理想之选。… Read More

自适应网页设计/响应式Web设计 (Responsive Web Design)

随着3G的普及,越来越多的人使用手机上网。 移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素。同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事。 很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone / iPad版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。 于是,很早就有人设想,能不能”一次设计,普遍适用”,让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout)? 一、”自适应网页设计”的概念 2010年,Ethan Marcotte提出了“自适应网页设计”(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。 他制作了一个范例,里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素,则6张图片并排在一行。 如果屏幕宽度在600像素到1300像素之间,则6张图片分成两行。 如果屏幕宽度在400像素到600像素之间,则导航栏移到网页头部。 如果屏幕宽度在400像素以下,则6张图片分成三行。 mediaqueri.es上面有更多这样的例子。 这里还有一个测试小工具,可以在一张网页上,同时显示不同分辨率屏幕的测试效果,我推荐安装。 二、允许网页宽度自动调整 “自适应网页设计”到底是怎么做到的?其实并不难。 首先,在网页代码的头部,加入一行viewport元标签。 <meta name="viewport" content="width=device-width, initial-scale=1" /> viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。 所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js。   <!--[if lt IE 9]>     <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>   <![endif]--> 三、不使用绝对宽度 由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。 具体说,CSS代码不能指定像素宽度: width:xxx px;… Read More

什么是Viewport Meta(width详解)及在手机上的应用

  viewport是专为手机浏览器设计的一个meta标签; 有些屏幕很小有智能手机,但分辩率却可以做得很大,比如小米4的默认分辨率 为:1920*1080,比许多电脑桌面的都还大,传统桌面网站直接放到手机上阅读时,界面就会显得非常小,阅读体验就很差,就样就需要一种将原始视图在 手机上放大的机制,使用viewport标签可以解决这个问题,如 <meta name="viewport" content="width=device-width, initial-scale=1"> width=device-width: 表示此宽度不依赖于原始象素(px),而依赖于屏幕的宽度,如iphone 4(3.5寸)屏幕的大小相当于电脑屏幕上的320px显示的效果 下图为设置了viewport标签后在手机上的显示效果,注意右侧手机每格代表50个象素,目测为375px,即可能是iphone 6之类机型尺寸显示的效果: 此外viewport port标签还有一些其它属性: initial-scale:初始缩放比例 maximum-scale:允许缩放的最大比例 minimum-scale:允许缩放的最小比例 user-scalable:是否允许手动缩放 你也可以给width设置一个值,这意味着宽度属性实际上转化为一个最小宽度视图。例如,如果你的布局至少需要500像素宽,那么你可以使用下面的标记。当屏幕宽度大于500像素时,浏览器将扩大视图(而非放大),以适合屏幕: <meta name="viewport" content="width=500, initial-scale=1"> Chrome 在最新版是更改了一些Viewport的显示机制,参考 Matt Gaunt 的博客 在 In Chrome M40  ,关于viewport有一个微秒的变化,很可能会给用户带来很大的不同。 Rick Byers (Google工程师,负责Chromebook Pixel)这样描述virtual viewport: … Read More

LESS vs SASS?选择哪种CSS样式编程语言?

你可能已经被关于应该用Sass还是用LESS的争论折磨死了。在这篇文章中,我会解释为什么你应该使用Sass。如果你感兴趣,我会介绍如何开始使用Sass以及在预处理时会遇到的一些问题。 在我的长篇大论之前,让我稍微提一下,你应该先学一下LESS。LESS对于初学者来说是极好的:它非常容易使用和设置,它跟CSS非常像,写起来非常直观,简单还有友好,我曾经非常喜欢LESS。 直到最近我发现了Sass和Compass的。往回看,我还是倾向于LESS是针对初学者的,是对预处理CSS很好的入门。Sass是下一代的,对有经验的前端工程师来说是很有用的工具。 为什么Sass比LESS要好 Sass有很多可用的方法和逻辑。例如:条件和循环语句。LESS也可以做到,但不是很高效且不直观。像LESS一样,Sass也内置了一些非常友好的函数,像颜色,数字,还有变量列表。 Sass用户可以使用功能强大的Compass库。这些库LESS用户也可以用,但并不完全一样,因为这是由一个庞大的社区来共同维护的。Compass有非常强大的特性,像自动生成图片切片(CSS Sprites),传统浏览器支持,还有对CSS3的跨浏览器支持等。 Compass同样允许你使用外部框架像Blueprint, Foundation 或 Bootstrap。这也意味着你可以非常容易的使用你喜欢的框架而不需要掌握各种不同的工具。 LESS的问题 LESS的目标是尽量跟CSS在风格上保持一致,包括语义和结构。这对于用户的书写习惯来说是一个很好的想法,这样也让它的工作方式和SASS有很大的不同。 逻辑语句 在LESS中你可以使用”guarded mixin”来表达基本的逻辑: .lightswitch(@colour) when (lightness(@colour) > 40%) { color: @colour; background-color: #000; .box-shadow(0 3px 4px #ddd); } .lightswitch(@colour) when (lightness(@colour) < 41%) { color: @colour; background-color:… Read More

什么是响应式Web设计?怎样进行?

开 始第一篇。老规矩,先无聊的谈论天气一类的话题。十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡。话说两年前也是在国庆假期里开始 做Joomla文档翻译的;长假好时光,总会可以抽出一两天,安静的窝在家里做做博客、学做些新东西,简直没有比这更舒心的事情。 说正事 儿。准备在近期的几篇里集中翻译学习一下“响应式Web设计”的相关话题,包括概念、实践方式、案例及观点讨论等方面。相比于从前做的文档译文,这些文章 篇幅要长的多(甚至要加分页了!…),今天放上的这篇几乎花掉了两天的“闲暇时间”;对耐力是个考验,努力提高喽。废话结束,here we go. 眼 下,几乎每个新客户都希望他们的网站可以有专门的移动设备版本。最完美的情况呐,就是为iPhone、iPad、黑莓、Kindle…各自打造一款 ——页面分辨率还必须兼容任何设备。谁知道未来5年内我们还需要为多少新发明的设备设计开发不同版本的页面?这种疯狂什么时候算个头? 在 Web设计和开发领域,很快的,我们将会无法跟上设备与分辨率革新的步伐。对于多数网站来说,为每种新设备及分辨率创建其独立的版本根本就是不切实际的; 结果就是,我们将会赢得使用某些设备的用户群,而失去那些使用其他设备的用户。不过,或许会有另外一种方式,可以帮助我们避免这种情况的发生。 响 应式Web设计(Responsive Web design)的理念是,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方 面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说, 页面应该有能力去自动响应用户的设备环境。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了。 响应式Web设计的概念 Ethan Marcotte曾经在A List Apart发表过一篇文章“Responsive Web Design”,文中援引了响应式建筑设计的概念: 最 近出现了一门新兴的学科——“响应式建筑(responsive architecture)”——提出,物理空间应该可以根据存在于其中的人的情况进行响应。结合嵌入式机器人技术以及可拉伸材料的应用,建筑师们正在尝 试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体结构;还可以使用运动传感器配合气候控制系统,调整室内的温度及环境光。已经有公司在生产 “智能玻璃”:当室内人数达到一定的阀值时,这种玻璃可以自动变为不透明,确保隐私。 将这个思路延伸到Web设计的领域,我们就得到了一个全新的概念。为什么一定要为每个用户群各自打造一套设计和开发方案?和响应式建筑相似,Web设计同样应该做到根据不同设备环境自动响应及调整。 显 然,我们无法也无需使用运动传感器或是机器人技术,响应式Web设计更多需要的是抽象思维。好在,一些相关的概念已经得到了实践,比如液态布局、帮助页面 重新格式化的media queries和脚本等。但是响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等,它更像是一种对于设计的全新思维模式。 调整分辨率… Read More