【MDN翻译】响应式Web设计

最后更新:2014年4月3日1:32:48

Contributor:清风迅来

原文链接:https://developer.mozilla.org/en-US/docs/Web_Development/Responsive_Web_design

 

随着越来越多的用户使用移动设备来浏览网站和应用,Web设计人员和开发人员需要确保他们的作品在移动设备上同样能正常运作,并且看上去和在传统台式电脑上一样好。 著名设计师 Luke Wroblewski 主张 “移动优先” 设计而不是为桌面端设计完之后再考虑移动端。 无论您将移动设备作为主要目标来设计或作为额外目标,您都可以借助强大的CSS来保证同样的内容从手机到宽屏高分辨率显示器上,实现跨全部硬件平台访问和适应。

这种方法被称为“响应式 Web 设计”。它的一些策略包括::

  • 流式布局: 按照浏览器视窗的百分比来设定所有容器的宽度,从而使容器在浏览器窗口大小变化时自动缩放。
  • 媒体查询: 基于显示设备的物理特性(例如:尺寸、分辨率、宽高比、颜色位深等)来调用不同的样式表。
  • 流式图片: 设置图像所占宽度至多为设备的最大宽度。

Firefox Marketplace 的最低需求

如果您提交一个应用到 Firefox OS 或 Firefox for Android 上的Firefox Marketplace,那么这个应用必须响应不同的手机屏幕尺寸和屏幕像素密度。请记住屏幕最小尺寸为 320 * 480 像素。另一个常见的错误是未识别屏幕像素密度,以至于没有相应地调整字体大小和触摸目标。欲了解更多信息, 请参阅 Marketplace 审查准则

相关资源

概述

技术文档

工具

样例

译注:这篇响应式设计的概述简单地介绍了一些响应式策略,又疑似顺便为Firefox Marketplace 做了个小广告..
之后提及的一些资料,其中的pointer media query 似乎有点意思,这个是根据不同的物理指针(pointer)的精度作为media query的查询条件,比方说鼠标就是fine,表示精度很高,普通的触屏设备比如pad啊mobile啊之类就是coarse,不具备任何指针的就是none(似乎很少见诶)……
不过呢,好像这货CSS 4 才支持哦….

【MDN翻译】Web 标准

最后更新:2014年4月2日0:32:24
Contributor:清风迅来(XuXun)
Web标准 Web标准经过精心设计,旨在让广大用户享有最佳的上网体验,同时也确保在网上发布的文件经久不衰。由这些标准设计、构建的网站简化并降低了开发成本,同时又可以让更多人访问,并适应更多的上网设备。随着传统桌面浏览器的进化、新型互联网设备进入市场,经由这些准则开发的网站将继续正常运作。

参考文章

将应用从IE浏览器迁移到Mozilla浏览器
是否在迁移针对IE浏览器定制的应用到Mozilla浏览器时遇到了麻烦?本文涵盖了迁移应用到开源的基于Mozilla的浏览器的过程中相关的常见问题。
在您的网页中应用Web标准
本文概述了如何升级你的网页从而使之遵循 W3C Web标准。
为什么选择符合标准而不是私有实现?
应用通常是跨多个开发小组设计的,因此在开发过程中需要一个通用标准。
Web标准的商业价值
本文探讨了遵守Web标准、丢弃私有标记和技术是如何帮助一家公司实现其商业目标的。

查看全部…

社区

  • 浏览 Mozilla 论坛…

 

工具

查看全部…

Examples

CSS, DHTML, HTML, Web 开发, XHTML, XML

The Web Standards Project

 

后注:

第一次尝试在MDN上贡献翻译文,自己英文也很久没啃了.. 翻译技巧啥的估计也都还给老师了,这篇小短文就花了我快1个多小时时间呐。。好拙计。。
总之自己好好努力…好好学习天天向上吧~

清风迅来 (XuXun)
Dalston Xu

2014年4月2日0:37:31

学习使用CoffeeScript(一)以及部分js基础知识扫盲……

2014年3月26日22:39:49

前一阵子一直听马老板推荐coffee script 这个神器。
我的理解是这货是一个用于JS预处理的东东,coffee 之于 javacript 就如 less 之于 css。
今天难得下班比较早,外加早上又不小心点到她人人主页围观了一会儿以及下午又被来面试前端的童鞋的高水平给刺激到了..
于是就稍微研究了一下这个东西,顺便开启博客恢复更新模式..
好了,废话不多说了,先上coffeescript 的官方网站: http://coffeescript.org/
然后打开nodejs客户端,输入以下命令:
npm install -g coffee-script

1-install-coffeescript

下载安装完之后就可以使用啦,文档的话还是参照官方网站好了。
2-test-coffeescript
2-test-coffeescript
接下来安装官网上的介绍做一下示例程序~
3-demo-coffeescript
3-demo-coffeescript
先是简单的一个定义语句

4-use-coffeescript

由 coffee 转为 javascript 之后,多了不少东东呢..
5-coffeescript-to-javascript
5-coffeescript-to-javascript
嗯.. js孤陋寡闻的我还是研究下这个“简单”的代码吧。。
首先,这个似乎是由一个匿名函数包裹起来.. 最后为啥尼玛又call调用自己啊我戳。。
查阅了一下 MDN的手册 ,
上面的解释是:
 The call() method calls a function with a given this value and arguments provided individually.
说人话大概就是:call()方法根据给定的this值和若干参数来调用一个函数…
实际操作呢结合到上面的代码,就是:直接调用这个匿名函数的call方法,木有参数。
查阅了JS高级程序设计这本书的第116以及117页,5.5.5 函数属性和方法。
上面写到:
每个函数都包含两个非继承而来的方法:apply()和call()。两者的用途都是在特定的作用域中调用函数,实际上等于设置函数体内的this对象的值。
而函数体内的this对象,由5.5.4 函数内部属性 可知,
函数内部有两个特殊对象,arguments 和 this, 其中 this 的行为与 Java和C#中的this大致类似。
换句话说,this引用的是函数据以执行的环境对象——或者也可以说是this值(挡在网页的全局作用域中调用函数时,this对象引用的就是window)。
举个栗子:
window.color = “red”;
var o = {color:”blue”};
function sayColor() {
     alert(this.color);
}
sayColor();       // ???
o.sayColor = sayColor ;
o.sayColor();   //  ???
—————————
一定要牢记:函数的名字仅仅是一个包含指针的变量而已。因此,即使是在不同的环境中执行,全局的sayColor()函数与o.sayColor() 指向的仍然是同一个函数!
—————————
以上
清风迅来(XuXun)
Dalston Xu

弱弱发一则招聘启事我知道肯定木有人来看的~~~

 爱回收网招前端开发实习生,www.aihuishou.com
在这里,你将与视觉设计师一起,参与完成产品线Web功能的开发;
我们希望你,关注新事物、新技术,有较强的学习能力,喜欢挑战,热爱前端开发;我们希望你,可以熟练使用各种 Web 前端技术,包括CSS布局、解决常见浏览器兼容性问题;
我们希望你,有基于Ajax 应用的开发经验,了解一门后台开发语言。
有兴趣的可以留言~

【前端】table中使用colgroup应用样式在HTML5文档标准下的问题

近日,在做一个页面的时候,需要对一个表格的某几列添加一些样式,理所当然地想到了一个标签: colgroup。于是乎打算先在w3cschool上DIY下看看效果,结果发现被坑爹了……

 

colgroup样例代码的显示就出问题了

以上的代码我还没有对其修改,结果显而易见,colgroup里的style:color 属性失效了……  同时,就连 align 属性也跪了..

当时的开发需求是需要对N个网页里的表格模板进行样式修改,所以总不见得把每一个模板的table的那些行都手工添加上一个class吧 T_T..

在网上找了下原因,结果在  Table columns  这篇文章里,发现了一些相关的介绍,大致意思是:原先在HTML4的时候确实是可以对colgroup应用样式的,但是到了HTML5里:

“很不幸,W3C声明中,只有一部分的样式属性可以应用到column上(border,background,width和visibility)。例外: IE7 及更低版本”

这份介绍看得我真是菊花甚痛…… 我于是用ie浏览器去测试了一下,结果确实如此:从IE8一直到IE10,都无法显示colgroup的样式,但是到了IE7就瞬间亮瞎……

IE7下colgroup的属性正常应用样式

IE7下colgroup的属性能够正常应用样式..

以上的问题在 w3.org 的wiki上也有提及,确实是目前仅能应用4个样式。

按照语义化来说,使用 colgroup 确实是符合标准的诶,不知道为何目前仍然没有支持。根据 stackoverflow 上面的一个问答,发现竟然已经是5年前的问题了… 有一种可能性是因为table的物理模型上,colgroup以及col是位于第二、第三层,仅高于最底层的table,而tr,td,th等都位于最高层,会覆盖底层的样式?(可是也尝试给colgroup加了id以增加,不过也没有效果)

于是乎,回过头来看自己项目本身的需求,也只是需要修改下字体的对齐方式(居左改为居中),所以兼容性的要求相对也不是很高,决定使用 css 3 的 选择器。所以稍作权衡,就决定用css3选择器 :nth-child(n)

———————————————–

不过实际上,当我看到后台模板编辑里的某个东东的时候… 瞬间就手贱了……

富文本编辑器的text-align

妥妥地偷懒使用富文本编辑器的对齐功能了…… (不过实际上没偷懒多少吧… 还是要一个个跑到模板里去改…… ORZ….

 

徐迅
Dalston
2013年11月25日20:57:53

 

CSS Sprites 应用于Go Top导航(未完成版)

首先在 Google Reader 里看到MG12大神一篇文章
http://www.neoease.com/fixed-go-top-button-to-browser-window-with-jquery/

弄到了份代码
http://www.veryhuo.com/a/view/44967.html

此外图片为 MG12大神 博客里的图…… 目前某X技术有限,在此盗图略表歉意……

之后网上又开始搜索更详细的介绍
索引介绍
http://blog.bingo929.com/css-sprites-css-techniques-tools-tutorials.html

灰常基本的介绍,比较适合初学者
http://davidwalsh.name/css-sprites

进阶【原理介绍】
http://www.itnewb.com/tutorial/Optimize-Your-Web-Site-by-Using-CSS-Image-Sprites/
进阶【其他用法】
http://www.frankmanno.com/ideas/css-imagemap/

==========================================================

应用到WP中变更的代码
在 theme/twentyeleven/foot.php中,修改最下方代码为

<?php wp_footer(); ?>
<script language=”javascript” src=”http://xuxun.me/js/jquery-1.7.2.js”></script> <!– 加载 JQuery库 –>
<script language=”javascript” src=”http://xuxun.me/js/go_top.js”></script> <!– 2012-3-21 15:45 用于添加返回顶层小导航 –>
<link href=”http://xuxun.me/css/go_top.css” rel=”stylesheet” type=”text/css” /> <!– 设定返回顶层的样式 –>
</body>
</html>

Dalston
2012-3-31
未完待续 

Word Press Problems Met & Solved

PS:以下内容均针对 WP 3.3.1 版本中的 Twenty-Eleven 主题

1. 中文乱码问题: 于  2012-3-10 17:40
(1)MySQL数据库中各字段collate和char set属性变更为 utf 和 utf8_general_ci
登录phpMyAdmin在SQL的tab中输入:
ALTER TABLE 表名 CONVERT TO CHARACTER SET utf8 COLLATE utf8_general_ci

(2)检查 Word Press 根目录下wp-config.php,确保

/** Database Charset to use in creating database tables. */
define(‘DB_CHARSET’, ‘utf8’);

(3)确保编辑的 .php 文件保存时以 UTF-8 without BOM 的 Encoding 格式保存

2. 侧边栏日志分类树状显示、及显示日志数之无脑菜鸟解决方案: 于 2012-3-11 22:54
(1) 进入 WP 的 Admin 页面,点击左侧 Appearance 中的 Widgets , 在新页面中点击最右侧的 Main Sidebar 中 Categories 一栏上的小三角形,在下拉菜单中勾选 Show Post Counts 以及 Show Hierarchy 即可

PS: 为实现此功能,google了N久,才在经历了拖动自定义 menus widget 至 sidebar 中并选择要显示的 menus 发现了每个 Main Sidebar 旁边上的小三角形是可以点击的……顿时内牛满面……

3. 文章 meta 区域显示作者信息 于 2012-3-12 20:03
(1) ftp中 进入 wp-contentthemestwentyeleven ——(当前主题)目录,打开 functions.php ,然后搜索 function twentyeleven_posted_on 这个函数, 找到后,将

<span class="by-author"> <span class="sep"> by </span> <span class="author vcard">

by-author 删除

因为,该 CSS 样式设置为 display:none

PS:其实我想吐槽下,既然这边设置了display:none,那为何还要预留 author 信息呢? 嗯,不过这样到挺好的~ 满足各种需求~

4. 单文章页面显示侧边栏 于 2012-3-12 23:50
(1) 首先在 wp-contentthemestwentyeleven 目录下的 single.php 中
<?php get_footer(); ?> Continue reading “Word Press Problems Met & Solved”