剽窃来的一些移动端开发技巧

暂时没有分类整理,先堆一起,不一定都是bug。不要问我原理,踩一个记一个而已。

问题: Android 4.1 input placeholder 对不齐,设置 height == line-height 无用

解决: 为 input 设置高度,并设置 line-height: normal;

问题: 滑动卡顿

解决: -webkit-overflow-scrolling: touch; (iOS only)

问题: Android 下 fixed 定位左右偏移

解决: 同时设置 left:0; right:0;

问题: 呼出 iOS 数字键盘

解决: 设置 input 的 type=”tel”

问题: Android 2.3 max-height 失效

解决: 要和 overflow:hidden; 同时使用,需要飘出的元素用 padding 露出

问题: Android 下 transform: translate 的内部绝对定位元素不可点

解决: 不用绝对定位或不可点元素添加 transform: translateX(0px)

问题: 取消点击时半透明背景色

解决: -webkit-tap-highlight-color: rgba(0,0,0,0)

问题: 使用 -webkit-line-clamp:2; 时正好两行和超出两行渲染高度不同

解决: 未知

问题: 禁止 iOS 呼出菜单/保存图片/新窗口打开链接/彻底干掉点击效果

解决: -webkit-touch-callout: none;

问题: 去掉 input 首字母大写及联想功能

解决:

问题: 让 input 显示“搜索”而不是“换行”

解决: 1,input 加上 type=”search”; 2,外层套上 form 标签,同时监听 submit 事件并阻止默认行为

问题: 阻止被特定区域挡住的 DOM 元素响应事件

解决: pointer-events: none; 如果该特定区域内部需要响应事件,则将内部元素设置为 pointer-events: auto;

问题: 三星 Note 3 中 text-indent 撑开的 box 使用 overflow:hidden; 挡不住

解决: 使用其他方案如 color:rgba(0,0,0,0) 来隐藏文字

问题: Android 下 input focus 高亮外框无法消除

解决:

textarea, input{
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-modify: read-write-plaintext-only;
outline: none !important;
}

原文地址:

https://github.com/jiguang/mobile-web-bug-collection

为什么css 会使用重置 reset 样式

我们知道不同的浏览器客户端默认对css的解析会有区别,这种区别是内置到浏览器中的,也就是浏览器客户端会有其本身的一套css来解析默认的页面,如果 IE/Firefox/Chrome 每个版本的默认样式表都是一致的,那么我们的重置样式可以基于这些浏览器内置的样式,理论上将是不是渲染速度会更快一些呢?实际情况可能并不是这样子,包括IE 他们的不同版本的默认css也是不一样的.如下:

IE6 IE7 IE8 IE9
a
color: #00F;
text-decoration: underline;
color: #06C;
text-decoration: underline;
a:visited
color: #800080;
address
display: block;
font-style: italic;
b
font-weight: bold;
bdo
direction: rtl;
unicode-bidi: bidi-override;
blockquote
display: block;
margin: 14pt 30pt;
display: block;
margin: 1em 40px;
body
display: block;
margin: 15px 10px;
zoom: 1;
display: block;
margin: 8px;
zoom: 1;
button
background-color: #D4D0C8;
border-style: outset;
border-width: 2px;
font-family: sans-serif;
font-size: 10pt;
overflow: hidden;
text-align: center;
zoom: 1;
background-color: #F0F0F0;
border-width: 2px;
font-family: sans-serif;
font-size: 10pt;
overflow: hidden;
text-align: center;
zoom: 1;
background-color: #F0F0F0;
border-width: 3px;
box-sizing: border-box;
font-family: sans-serif;
font-size: 10pt;
overflow: hidden;
padding: 1px 8px;
text-align: center;
zoom: 1;
caption
display: block;
padding: 1px 3px 5px;
text-align: center;
zoom: 1;
display: block;
padding: 1px 300zzz 500zzz;
text-align: center;
zoom: 1;
display: table-caption;
text-align: center;
zoom: 1;
cite
font-style: italic;
code
font-family: monospace;
font-size: 10pt;
col
border-color: #D4D0C8;
display: block;
border-color: #F0F0F0;
display: block;
box-sizing: border-box;
display: table-column;
colgroup
border-color: #D4D0C8;
display: block;
border-color: #F0F0F0;
display: block;
box-sizing: border-box;
display: table-column-group;
dd
display: block;
margin: 0 0 0 30pt;
display: block;
margin: 0 0 0 40px;
del
text-decoration: line-through;
dfn
font-style: italic;
div
display: block;
dl
display: block;
margin: 14pt 0;
display: block;
margin: 1em 0;
dt
display: block;
em
font-style: italic;
embed
zoom: 1;
fieldset
border-style: groove;
border-width: 2px;
display: block;
zoom: 1;
border-style: groove;
border-width: 2px;
display: block;
padding: 0 2px 3px;
zoom: 1;
border-style: groove;
border-width: 2px;
display: block;
margin: 0 2px;
padding: 0 2px 3px;
zoom: 1;
form
display: block;
margin: 14pt 0;
display: block;
h1
display: block;
font-size: 24pt;
font-weight: bold;
margin: 14pt 0;
display: block;
font-size: 2em;
font-weight: bold;
margin: 0.67em 0;
page-break-after: avoid;
h2
display: block;
font-size: 18pt;
font-weight: bold;
margin: 14pt 0;
display: block;
font-size: 1.5em;
font-weight: bold;
margin: 0.83em 0;
page-break-after: avoid;
h3
display: block;
font-size: 13.55pt;
font-weight: bold;
margin: 14pt 0;
display: block;
font-size: 1.17em;
font-weight: bold;
margin: 1em 0;
page-break-after: avoid;
h4
display: block;
font-weight: bold;
margin: 14pt 0;
display: block;
font-size: 1em;
font-weight: bold;
margin: 1.33em 0;
page-break-after: avoid;
h5
display: block;
font-size: 10pt;
font-weight: bold;
margin: 14pt 0;
display: block;
font-size: 0.83em;
font-weight: bold;
margin: 1.67em 0;
page-break-after: avoid;
h6
display: block;
font-size: 7.55pt;
font-weight: bold;
margin: 14pt 0;
display: block;
font-size: 0.67em;
font-weight: bold;
margin: 2.33em 0;
page-break-after: avoid;
head
display: none;
hr
text-align: center;
zoom: 1;
outline: 0 none;
text-align: center;
zoom: 1;
border-style: inset;
border-width: 1px;
display: block;
margin-bottom: 0.5em;
margin-top: 0.5em;
overflow: hidden;
text-align: center;
zoom: 1;
html
overflow-x: auto;
overflow-y: scroll;
zoom: 1;
display: block;
zoom: 1;
i
font-style: italic;
iframe
background-color: #FFF;
height: 150px;
width: 300px;
zoom: 1;
img
zoom: 1;
input
background-color: #FFF;
border-style: inset;
border-width: 2px;
font-family: sans-serif;
font-size: 10pt;
overflow: hidden;
padding: 1px;
zoom: 1;
background-color: #FFF;
border-width: 2px;
font-family: sans-serif;
font-size: 10pt;
overflow: hidden;
padding: 1px;
zoom: 1;
ins
text-decoration: underline;
kbd
font-family: monospace;
font-size: 10pt;
legend
zoom: 1;
padding: 0 2px;
zoom: 1;
li
display: block;
display: list-item;
menu
display: block;
list-style-image: none;
list-style-position: outside;
list-style-type: disc;
margin: 14pt 0 14pt 30pt;
display: block;
list-style-image: none;
list-style-position: outside;
list-style-type: disc;
margin: 1em 0;
padding: 0 0 0 30pt;
object
zoom: 1;
ol
display: block;
list-style-image: none;
list-style-position: outside;
list-style-type: decimal;
margin: 14pt 0 14pt 30pt;
display: block;
list-style-image: none;
list-style-position: outside;
list-style-type: decimal;
margin: 1em 0;
padding: 0 0 0 30pt;
optgroup
font-family: sans-serif;
font-size: 10pt;
font-style: italic;
font-weight: bold;
option
font-family: sans-serif;
font-size: 10pt;
font-style: italic;
font-weight: bold;
p
display: block;
margin: 14pt 0;
display: block;
margin: 1em 0;
pre
display: block;
font-family: monospace;
font-size: 10pt;
white-space: pre;
display: block;
font-family: monospace;
font-size: 10pt;
margin: 1em 0;
white-space: pre;
rp
font-size: 6pt;
rt
font-size: 6pt;
display: ruby-text;
font-size: 6pt;
ruby
display: ruby;
samp
font-family: monospace;
font-size: 10pt;
script
display: none;
zoom: 1;
select
border-color: #FFF;
border-style: inset;
border-width: 2px;
font-family: sans-serif;
font-size: 10pt;
zoom: 1;
background-color: #FFF;
border-color: #FFF;
border-width: 2px;
font-family: sans-serif;
font-size: 10pt;
overflow: hidden;
zoom: 1;
background-color: #FFF;
border-width: 1px;
box-sizing: border-box;
font-family: sans-serif;
font-size: 10pt;
overflow: hidden;
zoom: 1;
small
font-size: 10pt;
font-size: 0.83em;
strong
font-weight: bold;
style
display: none;
zoom: 1;
sub
font-size: 10pt;
font-size: 0.83em;
sup
font-size: 10pt;
font-size: 0.83em;
table
border-color: #D4D0C8;
display: block;
zoom: 1;
border-color: #F0F0F0;
display: block;
zoom: 1;
border-color: #F0F0F0;
border-spacing: 2px 2px;
box-sizing: border-box;
display: table;
zoom: 1;
tbody
border-color: #D4D0C8;
display: block;
border-color: #F0F0F0;
display: block;
box-sizing: border-box;
display: table-row-group;
vertical-align: middle;
td
border-color: #D4D0C8;
display: block;
padding: 1px;
zoom: 1;
border-color: #F0F0F0;
display: block;
padding: 1px;
zoom: 1;
display: table-cell;
padding: 1px;
vertical-align: middle;
zoom: 1;
textarea
background-color: #FFF;
border-style: inset;
border-width: 2px;
font-family: monospace;
font-size: 10pt;
overflow-x: hidden;
overflow-y: scroll;
padding: 1px;
white-space: pre;
zoom: 1;
background-color: #FFF;
border-width: 2px;
font-family: monospace;
font-size: 10pt;
overflow-x: hidden;
overflow-y: scroll;
padding: 2px;
white-space: pre;
zoom: 1;
background-color: #FFF;
border-width: 1px;
font-family: monospace;
font-size: 10pt;
overflow-x: hidden;
overflow-y: scroll;
padding: 2px;
white-space: pre-wrap;
zoom: 1;
tfoot
border-color: #D4D0C8;
display: block;
border-color: #F0F0F0;
display: block;
box-sizing: border-box;
display: table-footer-group;
vertical-align: middle;
th
border-color: #D4D0C8;
display: block;
font-weight: bold;
padding: 1px;
text-align: center;
zoom: 1;
border-color: #F0F0F0;
display: block;
font-weight: bold;
padding: 1px;
text-align: center;
zoom: 1;
display: table-cell;
font-weight: bold;
padding: 1px;
text-align: center;
vertical-align: middle;
zoom: 1;
thead
border-color: #D4D0C8;
display: block;
border-color: #F0F0F0;
display: block;
box-sizing: border-box;
display: table-header-group;
vertical-align: middle;
tr
border-color: #D4D0C8;
display: block;
zoom: 1;
border-color: #F0F0F0;
display: block;
zoom: 1;
box-sizing: border-box;
display: table-row;
vertical-align: middle;
zoom: 1;
ul
display: block;
list-style-image: none;
list-style-position: outside;
list-style-type: disc;
margin: 14pt 0 14pt 30pt;
display: block;
list-style-image: none;
list-style-position: outside;
list-style-type: disc;
margin: 1em 0;
padding: 0 0 0 30pt;
var
font-style: italic;

原文来自: http://www.iecss.com/

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

下面这段代码是从 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);

效果

样式名称面面观

我们在项目中经常需要对某些元素设置尺寸,如输入框、文本框、字号大小等等。这些尺寸的宽度可能是步进的,也可能是随机的数字。下面的css命名方式你可能遇到过。

.font12{font-size:12px;}
.font14{font-size:14px;}
.input-200{width:200px;}
.input-200{width:200px;}
.textarea-200{width:200px;height:200px;}
.textarea-400{width:400px;height:400px;}

这些样式可能会被我们当成公用样式,在任何页面的任何地方使用,多次复用,符合咱们css优化的逻辑,而且样式的命名非常语义话,一点都不怕分不清楚。

但是我们也要注意到这种直观的命名方式的所隐藏的危险,当我们的产品达到一定量级的时候,突然接到一个产品需求,就是老大们觉得目前的字号太小,让我们改大一号,那我们如何操作呢?

第一种方式,最简单也最直接,那就是直接修改css,PHP不用去改动,这种好处就是页面构建工程师可控。我们的方案就是:

.font12{font-size:13px;}

很快漫山遍野使用 font12 样式的元素都变化了,很快很强大,但是问题是原来直观的样式名名不副实了,让后来的小弟弟、小妹妹们都迷惑了。
还有一种兴师动众的方案,让对css样式陌生的PHP/asp/jsp工程师一起动手吧!我们这边将样式做修改:

.font13{font-size:13px;}

PHP/asp/jsp 师们则漫山遍野、沟沟坎坎的找 <element class=”font12″>将他们变成<element class=”font13″>,人多了,出错的几率就大了,风险也大了,挨骂的几率也高了。

有没有更好的解决方案呢?其实问题的源头就在于咱们起的那个名字上,不是有人说“名字决定命运吗?”,名字起的不好注定命运坎坷,名字带个“金”啊“斗”啊肯定幸福美满。咱们的应该起个更有诗意的名字而不是那么直白的“臭蛋”、“狗屎”。

大家每个人都买过衣服吧?咱们回想一下 XS、S、L、XL、XXL、XXXL,并且我们经常碰到不同品牌的产品相同的号码实际上却不一样大。这又时常不是我们日常中碰到的呢?比如我们经常看见一些CSS框架库,他们是英语国家发明的,当我们在使用的时候就需要根据自己的情况做修改了。

言归正传,回到样式的命名上,我们根据衣服的经验来重新命名,让它从根上更健壮一些。

.font-xs{font-size:9px;}
.font-s{font-size:10px;}
.font-x{font-size:12px;}
.font-xl{font-size:14px;}
.font-xxl{font-size:16px;}
.font-xxxl{font-size:18px;}

这样当我们改动属性值的时候,是不是觉得更优雅呢?不用纠结于那些直白的数字。

其实直白的数字也没有那么可怕,我们使用栅格布局的时候,直白的数字让我们更方便,比如我们固定宽度的布局,我们可以预设一个基本单位,这个的宽度是80,我们可以像下面这样部署不同宽度的东西。名字如下:

.col-1{width:90px;}
.col-2{width:180px;}
.col-3{width:270px;}
...
.col-9{width:810px;}
.col-10{width:900px;}

步进式的命名也很容易控制。当我们看到设计稿不符合规则的时候,我们就需要让他们修改一下设计稿,让我们的计算更加方便。