CSSASS

天命：响应式布局的单位——VW/VH 作者：Neoxone 发表时间： 2016年12月30号，星期五阅读：2,100 次

几年前，人们谈论响应式布局的时候，必会提到一个单位：rem，其基于rem的布局思路影响一直持续到今天。那么rem是否是最好的呢？有没有更合理的布局结局方案呢？以下是原文：

我认为基于vw开发布局比基于rem不知道要高明到哪里去了。

vw可以轻松搞定弹性布局，流体布局。而网上那些吹捧rem的文章，所用的响应式适配方案都是基于弹性布局的。流体布局？人家说了，流体布局不好，见 web app变革之rem ；
vw逻辑非常清晰，”1vw ＝ 1/100th viewport width”，用viewport width的百分比来设置element width。rem是什么？“The font size of the root element”，就是说你用它来布局，就相当于用font size 来设置 width size，中间你要转一道。

基于以上，我也发出了题主的疑问，为什么rem这种单位会被用来布局，而vw这种天生的布局单位缺鲜有人关注？

所以今天深扒了一下关于这两个单位在 W3C组织的邮件组里的讨论，
rem这个单位，我能找到的最早讨论是在2002年4月，一封比较各种样式语言的邮件中：http://lists.w3.org/Archives/Public/www-style/2002Apr/0010.html ，

CSS3 would just need a unit relative to the Root element's EM -- say, 'rem'

之后有理由相信，rem最晚在2003年8月，已经被讨论组内人士所公认，并有可能已处在 w3c 工作组成员的笔记之中：http://lists.w3.org/Archives/Public/www-style/2003Aug/0044.html

According to my experience, when some authors look for exotic ways to define size of some element, it really comes to trying to define size of that element relative to viewport size. Nowadays, one has to use percentages and carefully compute size of every element from root to the element one wants to set size for. This is logical addition to 'rem' unit (root's em).

邮件的作者此时也提出了两个单位：

vpw: viewport width vph: viewport height

仔细一看，这不就是现在的vw 和 vh 么。

其实，再早半年，也已经有人提出了与 vw 和 vh 接近的概念：http://lists.w3.org/Archives/Public/www-style/2003Feb/0110.html

The unit should be relative to the screen (or paper) width. The unit should be referenced to the preferred screen resolution.
I suggest those units: sw8 = (screen.width / 800 ) px; sw12 = (screen.width / 1200 ) px; sw16 = (screen.width / 1600 ) px; sw24 = (screen.width / 2400 ) px;

2005年3月，从一封讨论CSS运算表达式的邮件里 http://lists.w3.org/Archives/Public/www-style/2005Mar/0057.html 可以确定 vw 已基本被定下，同时被定下的还有vh 和 vm (也就是后来的vmin)：

the working group recently decided to investigate the implications of allowing simple, linear expressions as values.
Some common cases can be done without expressions, by means of a few new units:
gd = the grid unit from CSS3 Text rem = the font size of the root element vw = the viewport width (or 1/100th of it) vh = the viewport height (or 1/100th of it) vm = min(vw, vh)

当然

There is not even a draft yet, though.

不过话音刚落，到了当年7月26日，working draft 发布： CSS3 Values and Units

此次是第二次发布CSS3 Values and Units草案，距离首次发布已经过去整整4年，显而易见： ren, vw, vh, vm 是同时进的草案。

之后，2012年3月8日，vm 更改为 vmin。2012年8月28日，发布Candidate Recommendation（备选标准），增加 vmax。截止到现在，CSS3 Values and Units依然处于备选标准阶段，并不是一个正式标准，CSS Values and Units Module Level 3。

但俨然它是一个事实标准，因为浏览器厂商从来不是等标准确定后才付之实施，否则就会落后于人。我猜也不乏浏览器厂家在事先实现了某个features，继而正式递交工作组要求成为标准的，当然大多数浏览器厂商本身就是标准制定组成员。所以，虽然同时进入标准，rem 和 vw 的命运还得看浏览器厂家们是否积极去实现。

我们来看看 rem 和 vw 在 Moliza 家的待遇：
2009-01-05：有用户提交bug要求支持rem：472195 – support css3 root em (‘rem’ or ‘re’) units
2009-07-11：有用户提交bug要求实现vw：503720 – Implement vw/vh/vmin/vmax (viewport sizes) from CSS 3 Values and Units
相差半年
2010-1-21: Firefox3.6发布，支持rem：Firefox 3.6 for developers
2013-2-19: Firefox 19发布，支持vw：Firefox 19 for developers
晚了三年

其它各家皆是如此，厚此而薄彼，就导致了如下的支持度差异：
rem：
vw:

回到原题，vw被支持的太晚是其并不流行的根本原因，而当时移动端web app/page的开发需求已经十分旺盛，弹性布局是一种不错的移动端界面兼容展现方式，对于rem机遇就此而来，便成为一个实现弹性布局效果的极佳方案。

其实看目前状况，对vw最不利的是Android Browser，据我调查Android Browser 4.4以下的还占全部Android Browser的 9% 左右, 这个量还是不容忽视的。

好在既然所有最新浏览器都已经支持，那么随着时间推移，相信未来vw必将会流行。

发布在 CSS3, 一己之见 | 2 条评论 »

Date对象初始化Month，Day参数的奇葩设定的解释作者：Neoxone 发表时间： 2014年08月16号，星期六阅读：5,974 次

new一个Date对象时，当以年份Y，月份M，日期D为参数传入来设定的时候，我们会发现：月份M是从0开始的，而日期D却是从1开始的。
即：M:0是一月，1是二月，11是十二月，但D：1 是一号，2是二号，31是三十一号。
如下：

<script type="text/javascript">
var t1 = new Date(2014,0,1).toLocaleString(),
	t2 = new Date(2014,1,2).toLocaleString(),
	t3 = new Date(2014,11,29).toLocaleString()
document.write(2014,"&nbsp;",0,"&nbsp;",1,"<br />",t1,"<br /><br />");
document.write(2014,"&nbsp;",1,"&nbsp;",2,"<br />",t2,"<br /><br />");
document.write(2014,"&nbsp;",11,"&nbsp;",29,"<br />",t3,"<br /><br />");
</script>

是不是觉得很别扭，很奇葩？

对于习惯了以“一月”称呼“January”，“二月”称呼“February”的人来说，让”0″和”一”对应，”1″和”二”对应肯定是超级别扭啊，
但好在我们这种人还属于“猿”类，对于一个程序猿来说，数组的第一位肯定是0，我们晚上数sheep都是从0开始数的，而整个世界也是由0起源的（当然终极是42！）。

如果说程序界都是以0为基数的，那为什么Day又是从1开始呢？
那么我告诉你1Day其实根本不是数组的第一项，Sheep的第一只，一个月的第一天！和月份一样，日期的初始也是0！
当1Day完成的时候，时间就已经过去了二十四小时，一千四百四十分钟，八万六千四百秒了。
所以0Day才是days的开始，那么我们来看看0Day到底是什么时候，让我们从1Day开始往前回溯，慢慢走，时光在此倒流，直到我们来到EVE，其实我们将每一天的开始设在了前夜。
如果按小数来细分的话，每月1号的正午应该算是0.5号，而10号的下午6点就是九又四分之三号！

<script type="text/javascript">
var t3 = new Date(2014,11,29).toLocaleString(),
	t2 = new Date(2014,1,2).toLocaleString(),
	t1 = new Date(2014,0,1).toLocaleString(),
	t0 = new Date(2014,0,0).toLocaleString();
document.write(2014,"&nbsp;",11,"&nbsp;",29,"<br />",t3,"<br /><br />");
document.write(2014,"&nbsp;",1,"&nbsp;",2,"<br />",t2,"<br /><br />");
document.write(2014,"&nbsp;",0,"&nbsp;",1,"<br />",t1,"<br /><br />");
document.write(2014,"&nbsp;",0,"&nbsp;",0,"<br />",t0,"<br /><br />");
</script>

如果我已经把大家弄糊涂了的话，那么我是故意的，23333。。。

0Day的设计，其实还有一个巨大的好处，我们调用new Date就可以轻松拿到当月的最后一号，而不用你自己去考虑大小月、闰年2月。
如下：

<script type="text/javascript">
var t1 = new Date(2014,1,0).toLocaleString(),
	t2 = new Date(2014,2,0).toLocaleString(),
	t3 = new Date(2014,3,0).toLocaleString(),
	t4 = new Date(2014,4,0).toLocaleString();
document.write(t1,"<br />");
document.write(t2,"<br />");
document.write(t3,"<br />");
document.write(t4,"<br />");
</script>

码字充数：
在知乎上看见有人提问javascript 里面为什么不提供date的格式化函数？其实在Firefox上是提供了一个toLocaleFormat方法的。

<script type="text/javascript">
(function(){
	if(!new Date().toLocaleFormat) return alert("Date has no method 'toLocaleFormat'");
	var t1 = new Date().toLocaleFormat("%y/%m/%d");
		t2 = new Date("2015,2,14").toLocaleFormat("%y-%m-%d");
		t3 = new Date(1391012219050).toLocaleFormat();
	document.write(t1,"<br />");
	document.write(t2,"<br />");
	document.write(t3,"<br />");
})();
</script>

参考： Date.prototype.toLocaleFormat()

标签： date, toLocaleFormat
发布在 Javascript, 一己之见 | 3 条评论 »

Unicode 的 Emoji表情字符（另附QQ的Emoticons表情图）作者：Neoxone 发表时间： 2014年05月9号，星期五阅读：5,492 次

Emoji表情对手机控们来说并不陌生，这套表情由日本人栗田穣崇(Shigetaka Kurit)创造，但俨然成了一种全球通用的语言，也难怪Unicode 6.0 中引入emoji表情到标准字符集，当然我个人觉得少不了Apple的推动。
Unicode 6.0.0

我将他们显示到下面(如果你用的是Mac系统或ios系统的safari浏览器，才有最佳效果。chrome浏览器几乎全部不能显示，Firefox和ie还行)

另外也附套QQ的自带表情（里面也包含Emoji）

发布在一己之见 | 一条评论 »

3D丝网作者：Neoxone 发表时间： 2014年05月6号，星期二阅读：5,344 次

要求浏览器支持WebGL或Canvas，
太久没更新Blog了，拿来充个数，顺便测测手机下能有怎样一个效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Threejs 3D lines</title>
<style>
*{padding:0;margin:0;}
body{background:#333;color:#fff;overflow:hidden;}
</style>
<script src="/public/js/extend.js"></script>
<script src="/blog/resource/threejs/three.min.js"></script>
</head>
<body>
<script>
var Producer = {
	points : [{
		x : 85.2,
		y : 205.2,
		z : -64.8,
		a : 1,
		b : 1,
		c : 1
	},{
		x : 60,
		y : -49.8,
		z : 184.8,
		a : 1,
		b : 1,
		c : 2
	},{
		x : 225,
		y : -195,
		z : 195,
		a : 1,
		b : 2,
		c : 1
	},{
		x : 40,
		y : -40.8,
		z : 114.8,
		a : 2,
		b : 1,
		c : 1
	},{
		x : 85.2,
		y : 105.2,
		z : -24.8,
		a : 2,
		b : 1,
		c : 1
	},{
		x : 85.2,
		y : 205.2,
		z : -64.8,
		a : 1,
		b : 1,
		c : 1
	}],
	changePoints : function(){
		var points = Producer.points;
		for(var i = 0 ; i < points.length; i++){
			item =  points[i];
			if(item.x < -250 || item.x > 250) item.a = -item.a;
			if(item.y < -250 || item.y > 250) item.b = -item.b;
			if(item.z < -250 || item.z > 250) item.c = -item.c;
			item.x -= item.a,
			item.y -= item.b,
			item.z -= item.c
		}
		spiralDemo.init().animate();
	}
};
function Spiral3D(){
	this.width = document.documentElement.offsetWidth;
	this.height = Math.max(document.documentElement.clientHeight,document.body.offsetHeight);
	this.camera = new THREE.PerspectiveCamera( 33, this.width / this.height, 1, 10000);
	this.scene = new THREE.Scene();
	this.renderer = null;
	this.create();
}
Spiral3D.prototype = {
	create : function(){
		try{
			this.renderer = new THREE.WebGLRenderer( { antialias: true } ); //webgl
		}catch(e){
			this.renderer = new THREE.CanvasRenderer(); //canvas
		}
		this.renderer.setSize( this.width, this.height);
		document.body.appendChild( this.renderer.domElement );
		this.init();
		return this;
	},
	init : function() {
		this.scene = new THREE.Scene();
		this.stop();
		var spline = new THREE.Spline( Producer.points ),  //以关键点创建曲线
			geometry = new THREE.Geometry(),
			material = new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 1, linewidth: 1, vertexColors: THREE.VertexColors } );
		//自动补全曲线点
		for ( var i =0, position, l = Producer.points.length * 7; i < l; i ++ ) {
			position = spline.getPoint( i/l );
			geometry.vertices[ i ] = new THREE.Vector3( position.x, position.y, position.z );
			geometry.colors[ i ] = new THREE.Color( 0x00ffff );
			geometry.colors[ i ].setHSV( ( 100 + position.x ) / 400 * i/8, ( 200 + position.x ) / 400, ( 250 + position.x ) / 300);
		}
		//创建100条线
		for(var line, i=0, l = 100 ; i<l; i++){
			line = new THREE.Line(geometry,  material);
			line.position = {x: 0, y: 0, z: 0};
			if(i > 0) {
				line.rotation.y = Math.PI * 2 * (i/l);
			}
			this.scene.add( line ); //将显示对象加入场景
		}
		return this;
	},
	render : function() {
		var timer = Date.now() * 0.0005;
		this.camera.position.x = Math.cos( timer ) * 500;
		this.camera.position.z = Math.sin( timer ) * 500;
		this.camera.lookAt( this.scene.position );
		this.renderer.render( this.scene, this.camera ); //使用渲染器
		return this;
	},
	_reqID : {},
	animate : function() {
		var that = this;
		var _loop = function(){
			that._reqID = requestAnimationFrame( _loop );
			that.render();
		}
		_loop();
		return this;
	},
	stop : function(){
		var that = this;
		cancelAnimationFrame(that._reqID);
	}
};
var spiralDemo = new Spiral3D();
	spiralDemo.animate();
setInterval(Producer.changePoints,50);
</script>
</body>
</html>

标签： canvas, threejs
发布在 HTML5 | 一条评论 »

鲸鱼夫妇(Baby Whale) 作者：Neoxone 发表时间： 2013年07月9号，星期二阅读：7,964 次

已经把这个小东西发布到了chrome应用商店。大家可以在chrome浏览器上添加这个扩展应用。安装地址，当然，虽然只是个小东西，可改进的地方还有很多，我会不定时做些修改，如果你有什么改进想法，望不吝赐教。

function inherit(klass,parent){
	function F(){}
	F.prototype = parent.prototype;
	klass.prototype = new F();
	klass.prototype.constructor = klass;
	return klass;
}
function getRandInt(min, max) {
	return (Math.random() * (max - min) + min) >> 0;
}
var family = [];
function Whale(options){
	var self = this;
	(function(options) {
		self.option = {
			size : [240, 120],
			pos : [0, 0],
			speed : [6, 2],
			spritX : [10, -3360],
			spritY : 0
		};
		extendCopy(options || {}, self.options);
	})();
	this.gender = 'male'
	this.init();
}
Whale.prototype = {
	init : function(){
		this.create();
		this.play();
		this.swim();
		family.push(this);
	},
	create : function(){
		var that = this;
		var whaleBox = document.createElement("DIV");
			whaleBox.className = "whale";
			whaleBox.style.width = this.option.size[0] + "px";
			whaleBox.style.height = this.option.size[1] + "px";
		document.body.appendChild(whaleBox);
		events.addEvent(whaleBox, "mousedown", function(){
			var e = arguments[0] || window.event;
			that._drag(e);
		});
		this.whaleBox = whaleBox;
		return this;
	},
	_swimTimer : null,
	swim : function(){
		var that = this,
			pos = this.option.pos,
			speed = this.option.speed,
			step = [Math.abs(this.option.speed[0]), Math.abs(this.option.speed[1])],
			dir = [speed[0]/step[0], speed[1]/step[1]],
			size = this.option.size;
		var moveX = 0,
			moveY = 0;
		this._swimTimer = setInterval(function(){
			moveX = dir[0] * getRandInt(1,step[0]);
			moveY = dir[1] * getRandInt(1,step[1]);
			if(pos[0] + moveX > Whale.windowSize[0] - size[0] || pos[0] + moveX < 0 ){
				//边境时候掉头
				moveX = 0;
				speed[0] = - speed[0];
				dir[0] = - dir[0];
				that.option.spritY += dir[0] * size[1];
				that.play();
			}
			if(pos[1] + moveX > Whale.windowSize[1] - size[1] || pos[1] + moveY < 0 ){
				moveY = 0;
				speed[1] = - speed[1];
				dir[1] = - dir[1];
			}
			pos[0] += moveX;
			pos[1] += moveY;
			that.whaleBox.style.left = pos[0] + "px";
			that.whaleBox.style.top = pos[1] + "px";
		},200);
	},
	hook : function(){
		 clearInterval(this._swimTimer);
	},
	_playTimer : null,
	play : function(){
		var that = this,
			s = Math.abs(this.option.speed[0]),
			spritX = this.option.spritX,
			x = spritX[0], //sprite开始位置
			y = this.option.spritY;
		clearInterval(this._playTimer);
		this._playTimer = setInterval(function(){
			x = (x <= spritX[1]) ? spritX[0] : x;
			that.whaleBox.style.cssText += "background-position:"+x+"px "+ y +"px;";
			x -= that.option.size[0];
		},1000/s/1);
	},
	_drag : function(e){
		var that = this;
		var whaleBox = that.whaleBox;
		var sX = whaleBox.offsetLeft,
			sY = whaleBox.offsetTop,
			dx = e.clientX,
			dy = e.clientY;
		that.hook();
		whaleBox.style.zIndex = Whale.zIndex++;
		events.addEvent(document, 'mousemove', dragHandle);
		events.addEvent(document, 'mouseup', cancelDragHandle);
		var largeL = Whale.windowSize[0] -  this.option.size[0],
			largeT = Whale.windowSize[1] -  this.option.size[1];
		function dragHandle() {
			var e = arguments[0] || window.event;
			var oX = sX + (e.clientX - dx),
				oY = sY + (e.clientY - dy);
			if(oX > largeL || oX < 0){
				oX = (oX < 0) ? 0 : largeL
			}
			if(oY > largeT || oY < 0){
				oY = (oY < 0) ? 0 : largeT
			}
			that.option.pos[0] = oX;
			that.option.pos[1] = oY;
			whaleBox.style.left = oX + "px";
			whaleBox.style.top = oY + "px";
		};
		function cancelDragHandle() {
			events.removeEvent(document, 'mousemove', dragHandle);
			events.removeEvent(document, 'mouseup', cancelDragHandle);
			that.swim();
		}
	}
}
Whale.zIndex = 1000;
Whale.windowSize = [document.documentElement.offsetWidth, Math.max(document.documentElement.clientHeight, document.body.offsetHeight)];
Whale.mating = function(){
	for(var i= 0 ; i< family.length; i++){
		if(family[i].gender !== "male") continue;
		for(var j= 0; j< family.length; j++){
			if(family[j].gender !== "female") continue;
			if(Math.abs(family[i].option.pos[0] - family[j].option.pos[0]) < 10 && Math.abs(family[i].option.pos[1] - family[j].option.pos[1]) < 10 && !family[j].option.gestation){
				(function(j){
					family[j].option.gestation = true;
					setTimeout(function(){
						family[j].option.gestation = false;
					},5 * 60 * 1000);
					new WhaleBaby({pos:[family[j].option.pos[0] + 80, family[j].option.pos[1] + 30]});
				})(j);
			}
		}
	}
}
function WhaleLady(options){
	var self = this;
	(function(options) {
		self.option = {
			size : [210, 100],
			pos : [80, 200],
			speed : [4, -2],
			spritX : [10, -2940],
			spritY : -300
		};
		extendCopy(options || {}, self.options);
	})();
	this.gender = "female";
	this.gestation = false;
	this.init();
}
function WhaleBaby(options){
	var self = this;
	(function(options) {
		self.option = {
			size : [120, 60],
			pos : [0, 100],
			speed : [7, -3],
			spritX : [2, -1650],
			spritY : -600
		};
		extendCopy(options || {}, self.option);
	})(options);
	this.init();
}
inherit(WhaleLady, Whale);
inherit(WhaleBaby, WhaleLady);
var bb = new WhaleLady();
var aa = new Whale();
setInterval(Whale.mating,1000);

标签：类, 继承
发布在 Javascript | 3 条评论 »

1 / 2912 3 4 5 »...尾页 »

天命：响应式布局的单位——VW/VH 作者：Neoxone 发表时间： 2016年12月30号，星期五 阅读：2,100 次

Date对象初始化Month，Day参数的奇葩设定的解释 作者：Neoxone 发表时间： 2014年08月16号，星期六 阅读：5,974 次

Unicode 的 Emoji表情字符 （另附QQ的Emoticons表情图） 作者：Neoxone 发表时间： 2014年05月9号，星期五 阅读：5,492 次

3D丝网 作者：Neoxone 发表时间： 2014年05月6号，星期二 阅读：5,344 次

鲸鱼夫妇(Baby Whale) 作者：Neoxone 发表时间： 2013年07月9号，星期二 阅读：7,964 次

天命：响应式布局的单位——VW/VH 作者：Neoxone 发表时间： 2016年12月30号，星期五阅读：2,100 次

Date对象初始化Month，Day参数的奇葩设定的解释作者：Neoxone 发表时间： 2014年08月16号，星期六阅读：5,974 次

Unicode 的 Emoji表情字符（另附QQ的Emoticons表情图）作者：Neoxone 发表时间： 2014年05月9号，星期五阅读：5,492 次

3D丝网作者：Neoxone 发表时间： 2014年05月6号，星期二阅读：5,344 次

鲸鱼夫妇(Baby Whale) 作者：Neoxone 发表时间： 2013年07月9号，星期二阅读：7,964 次