做一个 pad 的登录浮层用到的东东

虽说是一个很小的东西,但是使用到的东西还真不少。
1. 首先你要在你的静态页面中指定 viewport 的东西,要不然,他是自己缩放的,你根本不知道它的大小。

<meta name="viewport" content="width=device-width,initial-scale=1" />

2. 占位文字(placeholder)的 css 定义

.sos-pad-login ::-webkit-input-placeholder { color:#d2d2d2;font-size:20px;}

3. 输入框 focus 的时候,黄色框的问题

.sos-pad-login .ipt:focus{color:#333;border:1px solid #b5b5b5; outline:none;}

4. 去掉 ios 设备上,输入框的圆角效果

.sos-pad-login input{border:1px solid #d2d2d2;width:391px;height:42px;padding-left:14px; line-height:42px;font-size:20px;-webkit-appearance:none; border-radius:0;}

5. 当然如果用到了图片的背景图片的话,那就考虑一下双倍图的问题吧

@media screen and (-webkit-device-pixel-ratio: 2){
	.sos-pad-login .btn-cls,
	.sos-pad-login .btn-rfsh{ background-image:url(../images/sos_login_icon_tw.png);background-size:34px 80px;}
	}

6. 对input type=”text” 定义行高,会导致 placeholder 无法垂直居中,所以就不要定高度了

input {line-height:auto}

阿里云服务器配置 SVN 服务器与生产站点同步

作为linux的门外汉,一直觊觎svn的方便性,在有台aliyun的情况下,一起来搞搞。

1.环境

阿里云 centos5.5

2.安装svn

yum -y install subversion

3.配置

建立版本库目录

mkdir /alidata/www/svndata
svnserve -d -r /alidata/www/svndata

4.建立版本库

创建一个新的Subversion项目

svnadmin create /alidata/www/svndata/myproject

配置允许用户rsync访问

cd /alidata/www/svndata/myproject/conf
vi svnserve.conf
anon-access=none
auth-access=write
password-db=passwd

注:修改的文件前面不能有空格,否则启动svn server出错

vi passwd
[users]
#<用户1> = <密码1>
#<用户2> = <密码2>
myname=myaname

5.客户端连接

svn co svn://ip/alidata/www/svndata/myproject

用户名密码:myname

6.实现SVN与WEB同步,可以CO一个出来,也可以直接配在仓库中

1)设置WEB服务器根目录为/alidata/www/webroot

2)checkout一份SVN

svn co svn://localhost/alidata/www/svndata/myproject /alidata/www/webroot

修改权限为WEB用户

chown -R www:www /alidata/www/webroot/myproject

3)建立同步脚本

cd /alidata/www/svndata/oplinux/hooks/
cp post-commit.tmpl post-commit

编辑post-commit,在文件最后添加以下内容

export LANG=en_US.UTF-8
SVN=/usr/bin/svn
WEB=/alidata/www/webroot/
$SVN update $WEB –username myname –password myname
chown -R www:www $WEB

增加脚本执行权限

chmod +x post-commit

这样,我们上传svn后,生产站点就能立马显示出来了,自动化程度高了很多。

关于网站图标的那几段代码

下面这段代码是从 Foundation 网站上取下来了,留作备用。

    <link rel="icon" href="assets/img/icons/favicon.ico" type="image/x-icon">
	<!--针对拥有高分辨率视网膜屏第三代 iPad : -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/img/icons/apple-touch-icon-144x144-precomposed.png">
	<!--针对拥有高分辨率视网膜屏 iPhone : -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/img/icons/apple-touch-icon-114x114-precomposed.png">
	<!-- 针对 一代 二代 iPad: -->
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/img/icons/apple-touch-icon-72x72-precomposed.png">
	<!-- 针对非视网膜屏的 iPhone, iPod Touch, 和安卓 2.1 以上设备: -->
    <link rel="apple-touch-icon-precomposed" href="assets/img/icons/apple-touch-icon-precomposed.png">

从上面我们可以看到三种尺寸,那就是视网膜屏的 114×114像素,针对非视网膜屏 ipad 一代和二代的 74×74像素,剩下的就是 57×57像素.

这里面好像还没有针对windows Phone的字眼,再找找,它就在这里:
自定义站点图标

响应式设计-谈谈伪类和伪元素

啥是伪类?啥是伪元素,我想还是从我们熟悉的东西开始吧!可能我们最初接触伪类和伪元素应该是从 a (链接标签)开始的,我们通过 :link,:visited,:hover,:active,通过这些伪类,我们就改变了那些链接的文字颜色,也就是说我们改变了被选择元素的某些状态。

关于伪类的定义,我从 MDN 看到的描述是这样的:

A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector.

Pseudo-classes, together with pseudo-elements, let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on some form elements), or the position of the mouse (like :hover which lets you know if the mouse is over an element or not).

如果我去断章取义加谷歌翻译的理解的结果是:
伪类是一组关键字,可以定义被选择元素的特殊状态。比如 :hover 将会定义当用户的鼠标悬浮到被定义选择器的样式。
伪类和伪元素,让我们不仅可以定义文档树中的元素,也能让我们扩展到这些方面之外的东西,比如我们的访问记录(如 :visted),内容的状态(如某些表单元素的 :checked),或者鼠标的位置(如 :hover 让我们知道我们的鼠标是否在某个元素上面)。

下面是琳琅满目的伪类选择器,有些我们很熟悉,有些似曾相识,但是更多的可能是路人甲,附上链接地址给各位看官,方便大家了解。

从上面,我们可以说伪类就是给我们标示状态的,我们为什么称其为伪类呢?波塞冬(pseudo)的字面意思是冒充的、假的,也就是这些东西并不是真正的类,我们定义是他的状态。

但是我们的伪类还有:after,:before我们一直使用的,这些东西虽然没有给文档树增加节点,但是他们确实增加了内容,这样咱们做到的不仅仅是标示了状态,我们还增加了内容,所以我们有提出了伪元素的概念。下面给大家看看 MDN 的描述吧!

Just like pseudo-classes, pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of a document. For example, the ::first-line pseudo-element targets only the first line of an element specified by the selector.

都有哪些伪元素选择器呢?

我们看到在语法上面,伪元素和伪类最明显的区别是多了一个冒号,但是我们用 : :: 获得的结果是一样的,为毛?

Sometimes you will see double colons (::) instead of just one (:). This is part of CSS3 and an attempt to distinguish between pseudo-classes and pseudo-elements. Most browsers support both values.

::selection always starts with double colons (::).

我们可以看到,两个冒号是在css3中为了让我们区分开来伪类和伪元素。That’s all,吓我们一跳。

故事到这个地方还没有完,既然伪元素是 css3 中的东西,那它的兼容性咋样呢?答案如下:

Browser Lowest Version Support of
Internet Explorer 8.0 :pseudo-element
9.0 :pseudo-element ::pseudo-element
Firefox (Gecko) 1.0 (1.0) :pseudo-element
1.0 (1.5) :pseudo-element ::pseudo-element
Opera 4.0 :pseudo-element
7.0 :pseudo-element ::pseudo-element
Safari (WebKit) 1.0 (85) :pseudo-element ::pseudo-element

就是这样,如果你现在也在忙于响应式,那么你就要关注了,因为你要为IE8及以下的用户负责,要不然你的产出物可能要闯祸,你要负责,因为这些东西上流淌着你的血液。所以我们如果能用伪类的话,就先别用伪类选择器了,这可能是最直接的解决方案了。

但是两个冒号 :: 带来的麻烦不仅仅是在 IE8 及以下的浏览器上不解析,如果你像下面这么写 css 样式,那你要注意了,因为你的 css 在 IE8 上没有被解析。


.a,
.b::after{color:#f00}

我们可能认为即使IE8不解析伪元素,.a 的样式也能解析,但结果是 .a 在 IE8 及以下也不生效了。因此在群组选择器中是用伪元素要注意了。

转载请注明出处:响应式设计-谈谈伪类和伪元素

响应式设计-颜色透明度篇

在响应式设计中,我们需要面对的一个问题就是颜色在各个浏览器下的不同效果,这个不同不是颜色色值的不同,关键在透明度上面。
我们都知道 css 中的rgba 是一大福音,我们不需要用 png24 模仿那些忧报琵琶半遮面的效果(毛~玻璃),听上去很美。
但是,我们的响应式不仅要支持那些高富帅的浏览器,屌丝们使用的 IE8\IE7\IE6 也必须保证他们的效果。IE8 及以下的浏览器虽然不支持RGBA中的a,但是他们会识别RGB,这样我们通过纯色透明的方式的一些视觉效果就死翘翘了,原始的颜色裸在了沙滩上。
我们如何解决呢?
首先我们想到的是 HACK,这是Builder感觉最爽的,那种让IE浏览器臣服的感觉何止一个爽字,由于俺本身研究的不深入,也就是对 * 和 _ 有了解,但是IE8咋搞?

<div style="width:100px;height:100px;background:rgba(102,204,0,0.6);background:rgb(163,224,102)\0;*background:rgb(163,224,102);">
</div>

从上面的代码我们看到IE8得到了我们想要的颜色,我们使用了 \0 的hack,这样我们就解决了IE8的问题,只是……我们还要继续重置 IE7 及以下。
我们知道颜色的表示有 十六进制的(如:#FFF,#303030),还有三原色的 RGB(rgb(255,255,255));还有吗?确实还有,那就是HSL(Hue,Saturation,Lightness),就是色相、饱和度、亮度。我们可以查看一下浏览器关于对这种颜色表示方式的支持方式,答案是下面的样子:

  • Firefox 3.05+
  • Google Chrome 1.0.154+
  • Opera 9.6 +
  • Safari 3.2.1 +
  • Internet Explorer 8-

是不是有答案了?IE8以上的颜色我们可以使用HSL的表达方式,那么IE8及以下就用rgb或者16进制吧!我想答案是可以的

<div style="width:100px;height:100px;background:rgb(163,224,102);background:hsla(90,100%,40%,0.6);">
</div>

这样我们就解决了IE8下颜色透明的问题。

IE10下链接点击时背景色会变成灰色

IE10下,链接点击时,背景色会变成灰色,
影响到的平台:window
解决方法:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
a{background-color:transparent;}
}
详情请查看:
http://msdn.microsoft.com/library/windows/apps/Hh465764

Window Surface 下 设置的 viewport 属性无效

我们会在页面的 meta viewport 中设置如下属性,禁用页面的缩放:

<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1"/>

但是当使用 拥有 IE10 的surface时,这个meta 属性并没有生效,旋转的时候,内容缩放了,没有按照原始大小显示,我们的处理方法是在css 中增加专门针对IE的 viewport 属性

@-ms-viewport { width: device-width; }

详情请点击 http://msdn.microsoft.com/en-gb/library/ie/hh869615%28v=vs.85%29.aspx

HTML5 Canvas

hmtl5的canvas的使用确实要方便的多,只需掌握起基本的绘画语法就可以随心所欲的进行创作了,与js的结合则更加的完美。学习了一下canvas的基本语法,绘制了一个时钟同时使用javascript的定时器将其与本地时间保持同步。
canvas基本语法:
1、getContext(“2d”);//配置绘制环境,即2d绘制
2、clearRect(x,y,width,height);//清除画布,x为画布水平坐标,y为画布垂直坐标,width与height制定画布的范围
3、moveTo(x,y)绘图起点
4、lineTo(x,y)绘图终点
5、stroke()描边
6、fill()填充
7、fillStyle区块填充颜色
8、strokeStyle边框填充颜色
9、lineWidth设置边框宽度
10、arc(水平坐标,垂直坐标,半径,弧度起点,弧度终点,false/true);//false为顺时针绘画,true为逆时针绘画
注释:arc需要重点看一下,因为里面涉及到弧度与度数之间的转换1°=2π/360
11、beginPath()与closePath()封闭绘画区域

css style代码

body{background:black;}
#c1{background:white;}

HTML代码

<canvas id="c1" width="400" height="400"></canvas>

注释:canvas直接在行内定义width、height与在style里定义是有区别的,canvas画布默认值width为300px,height为150px,如果在style里面定义canvas的width、height则是对画布里元素进行比例缩放,有点scale的味道!具体缩放的比例则看定义的值与默认值的比例关系。
javascript代码

var oC = document.getElementById("c1");
	var oGc = oC.getContext("2d");//配置绘制环境,即2d绘制
	function toDraw(){
		var x = 200;
		var y = 200;
		var r = 150;
		oGc.clearRect(0,0,oC.width,oC.height);
		//获取时间
		var oDate = new Date();
		var oHours = oDate.getHours();
		var oMin = oDate.getMinutes();
		var oSen = oDate.getSeconds();
		//时针值
		var oHoursValue = (-90 + oHours * 30 + oMin/2)*Math.PI/180;
		var oMinValue = (-90 + oMin * 6 + oSen/10)*Math.PI/180;
		var oSecValue = (-90 + oSen * 6)*Math.PI/180;
		//秒针分区
		oGc.beginPath();
		for(var i = 0;i<60;i++){
			oGc.moveTo(x,y);
			oGc.arc(x,y,r,6*i*Math.PI/180,6*(i + 1)*Math.PI/180,false);//弧度计算
		}
		oGc.closePath();
		oGc.stroke();
		//秒针遮罩
		oGc.fillStyle = "white";
		oGc.beginPath();
			oGc.moveTo(x,y);
			oGc.arc(x,y,r*19/20,0,360*Math.PI/180,false);
		oGc.closePath();
		oGc.fill();
		
		//分针分区s
		oGc.lineWidth = "2";
		oGc.beginPath();
		for(var i = 0;i<12;i++){
			oGc.moveTo(x,y);
			oGc.arc(x,y,r,30*i*Math.PI/180,30*(i + 1)*Math.PI/180,false);//弧度计算
		}
		oGc.closePath();
		oGc.stroke();	
		//分针遮罩
		oGc.fillStyle = "white";
		oGc.beginPath();
			oGc.moveTo(x,y);
			oGc.arc(x,y,r*19/20,0,360*Math.PI/180,false);
		oGc.closePath();
		oGc.fill();
		
		//时针指针
		oGc.lineWidth = "5";
		oGc.beginPath();
		oGc.moveTo(x,y);
		oGc.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);
		oGc.closePath();
		oGc.stroke();
		//分针指针
		oGc.lineWidth = "3";
		oGc.beginPath();
		oGc.moveTo(x,y);
		oGc.arc(x,y,r*14/20,oMinValue,oMinValue,false);
		oGc.closePath();
		oGc.stroke();
		//秒针指针
		oGc.lineWidth = "1";
		oGc.beginPath();
		oGc.moveTo(x,y);
		oGc.arc(x,y,r*18/20,oSecValue,oSecValue,false);
		oGc.closePath();
		oGc.stroke();
		//中心圆轴
		oGc.fillStyle = "black";
		oGc.beginPath();
			oGc.moveTo(x,y);
			oGc.arc(x,y,r*0.8/20,0,360*Math.PI/180,false);
		oGc.closePath();
		oGc.fill();	
	}
	toDraw();
	setInterval(function(){
		toDraw();
	},1000);

效果

用 rem 单位定义文本大小

使用什么单位定义文字大小依然是一个比较有争议的地方,即使在此时此刻。不幸的是,在众多的提议和方法中,技术层面上并不理想。我们期望的是一个理想的解决方案。

这里有两个主要的技术方案:
1.尺寸使用 px
2.尺寸使用 em

在我们披露第三项技术之前,让我们先来回顾一下过去的两种实现方案

使用 px 定义尺寸

在互联网发展的早期阶段,我们使用像素去定义文本的大小尺寸。这种方法比较可靠,并且表现一致。不幸的是,当用户使用 IE 浏览器的时候(即使使用的是IE9),用户无法通过浏览器自带的功能去增大或者改小文字的大小。这些东西关系到你的网站可访问性,这可是大事。IE最近的版本拥有放大功能,它可以将页面上的所有内容扩大,这个特点在其他主流的浏览器中也有。这个功能使IE的可访问性的问题减少了。

就我个人而言,我曾经是 基于像素布局的拥堵,它能够提供一致的表现,用户有多种工具去调整视图,来提升他们的可访问性。除此之外,我们还能做什么?

使用 em 定义大小

在IE中调整文字的大小功能缺失依然是个缺陷。围绕这个问题,我们可以使用 em 单位。Richard Rutter 的文章 How to size text using ems,是我读到的最早关于此的文章,那是在2004年。

这种技术方案通过在 body 标签上通过百分比的方式改变基础文字尺寸。这种方法让让我们有一个基准,1em等于10像素,来替换掉默认的 1em 等于16像素。为了能让正文的文字大小是 14像素,我们需要将其设置为 1.4em。

body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p  { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */

这种基于 em 的文字计算方式是很繁琐的,我们有没有更好的方法?

使用 rem 定义尺寸

CSS3引入了一些新的单位,包括 rem 单位,它代表的是 “root em”(基础em)。看到这里,你如果依然感兴趣,让我们看看 em 标签是如何工作的。

em 单位是相对其父元素的 font-size,这就导致了其再次计算的问题。rem 标签是相对于其根的 或者 为其 html 标签。这样就意味着我们可以在 html 标签上定义一个单独的百分比尺寸,然后其它的单位都会基于此来计算。

html { font-size: 62.5%; } 
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

我定义了一个基准的文字尺寸 62.5%,让我们的计算更加方便,就像我们使用 px 定义那样。

但是浏览器支持的情况我们是不是要去考虑一下呢?

你可能比较奇怪,浏览器对这个新单位的支持还是很不错的:Safari 5, Chrome, Firefox 3.6+,甚至 IE9都支持这个新单位,更可喜的是IE9通过使用rem单位可以支持重新定义大小。(同时要指出的是 Opera(至少在版本11.10)都没有支持这个属性单位)。

我们对不支持 rem 的浏览器如何做兼容处理呢?我们可以通过使用 px 向后兼容,如果你不介意用户对旧的IE浏览器版本重置文本大小(在 IE7 和 IE8 中依然有缩放整个页面的功能)。为了达到这个目的,我们会先用 rem 定义文字大小,然后使用 px 单位重置前面定义的rem 单位。

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

现在,我们可以在所有的浏览器中保持精确一致的尺寸了,并且可以对文本在目前主要的浏览器中调整文字大小。

关于浮点数的计算方式,狠点”小数点单位的探讨“文章

原文地址:http://snook.ca/archives/html_and_css/font-size-with-rem

译文地址:http://varhi.com/?p=5629