手机移动端前端开发切图之head(meta、media query)

一、手机端必备meta

<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />

备注:我详细看过每个属性的含义,但在我遇到的项目中都没有修改属性值的必要,所以我一般都是直接复制粘贴;如果想刨根问底,点击http://www.php100.com/html/webkaifa/HTML5/2012/0831/10979.html

二、

怎样提高做前端开发切图的效率

前端开发作为网站建设中最有标准的一个流程,提高效率的可能性还是蛮大的;对于新兴的技术,这方面如果学习或者定制需要时间,这还可以理解;但是有大部分订单其实用到的知识点都是差不多的,如果把需要用到的都准备好,感觉应该能对切图速度有所改善;

一、把常用的jQuery库、jQuery插件库、CSS reset 全都整理好,放在约定的硬盘中;

二、熟练使用前端编辑软件(推荐sublime text)快捷键;熟练掌握emmet(对于emmet,从去年十一就嚷嚷着要学,到现在也没全学会,还自我安慰用处不大,其实就是太懒了,本周必须全过一遍)等有利于加快写代码速度的工具;

css画三角形边长宽高原理分析

css绘制三角形,已经有很多大神写过很详细的用法,在此不做赘述;http://www.jb51.net/article/42513.htm

最近一个项目需要用到精确到1px的三角形,但是查遍所有教程都只有用法,而没有对边长和宽高进行具体原理分析,导致此处修改数次耽误了挺长时间才做到让设计师同事满意;所以在项目结束后,通过chrome dev tool 详细分析下边长和宽高原理;

先看一段代码:

<div style="width:0;height:0;border-left:60px solid transparent;border-right:40px solid transparent;border-top:50px solid #ddd;"></div>

下面是这个代码在浏览器中的样子:

通过chrome dev tool 查看,这个三角形的宽是100px,高是50px;

由此可知:

此三角形的高(此处所说的高以中学课本定义为准:即顶点到底边的垂线)为有颜色的border(即#ddd)的border-width;

而底边被垂线分成两部分,分别是对应的border的border-width;

底边边长是两个transparent的border的border-width相加之和;