前端

移动端重构小结(1)

前言：
我是大懒虫Orz。一个月没有更新了=。=检讨一下。主要是在做一个移动端的app网页还有完成QT的作业还有过年还有益米的事情。真的要好好总结一下才能提升自己！

初始化

meta标签

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
移动端的页面一定会用到的meta标签。
相关概念：

  • meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对meta viewport的支持
  • 主要参数有下面几个：
    • maximum-scale：用户可以缩放的最大值
    • minimum-scale：用户可以缩放的最小值
    • initial-scale：viewport的默认缩放大小
    • width：固定viewport的宽度
    • height：固定viewport的高度
    • user-scalable：是否允许用户缩放
  • 前三个参数都是缩放相关的，它们的值是viewport的缩放大小，他们仅仅改变缩放大小，并不是改变viewport的实际大小。
  • 之后就是width和height，修改这俩东西就和我们在PC上访问网页时候用鼠标拖动浏览器来改变大小一样。或者说是浏览器（页面区域）在屏幕上的默认大小。可以是具体的数值，也可以用“device-width”和“device-height”把它设置成浏览器屏幕的大小。比如要把页面宽度固定到浏览器的屏幕上，防止出现横向滚动条就可以使用
  • 最后一个是指定是否允许用户自己缩放，也就是用户通过两个手指触屏来缩放的方式。默认都是允许的值为1，如果要禁止可以把它的值设置为0。就像下面这样

参考：移动端的meta viewport
更详细的文章：移动前端开发之viewport的深入理解

css

做这个小项目的时候参考了其他的移动端网页。（第一次做很没底）看到微店是固定的宽度：Woody的书屋
body{max-width:640px}并居中。然后我就模仿了。
在看它的HTML中顺便下载了它的css文件，base.css 里面都是一些基础样式，用处体现在写HTML的时候就顺便写了基本的布局CSS，像.margin-auto``txt_l什么的都是根据字面意思都能知道用上的CSS。不过其实这样感觉有点破坏了HTML的纯洁性呢~还是比较偏向用有语义的类名。而且这样很容易把类名写的很长很长：<section class="main-content margin_auto clear-fix">好吧这个还是算短的。

font-awesome

网页中用到挺多的图标，心想用图片太累赘了，找了一下就用上了字体图标。Font Awesome Icons效果很好，虽然有些图标和设计图不太一样不过。嗯，我就用了！用法还是很简单的，<i class="fa fa-chevron-left"></i>代表向左的箭头，通用类名是fa； 然后是各个图标的类名，在官网上查找就好。大部分基础的都有；要调整大小用fa-lg也可以更大。第一次用的时候把他包在a标签里面，然后发现居中就很蛋疼了。其实所有的图标居中都比较蛋疼。。用text-align:center可以水平居中，但是垂直居中就不行了。因为高度都不一样，vertical-align:middle也不行。某些实在不行的就用绝对定位了。在后面用到的一个感觉比较好的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.link a {
  color: #FFF;
  float: left;
  display: block;
  height: 20px;
  width: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  background-color: #323232;
  padding: 7px;
  margin-right: 9px;
  box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.07), inset 1px 1px 1px rgba(78, 78, 78, 0.26);
}

直接用a标签包住，能居中。

LESS

发现上面写的CSS怎么这么看起来好工整~原来是LESS生成的。
写LESS和CSS其实差不多。不过现在好喜欢用LESS哈，写起来有逻辑，而且方便。先装一个东西叫koala一只树袋熊~上手后就可以直接写LESS自动编译成CSS。LESS有几个特性：变量，函数，混入。主要也是用到这几个。

变量

变量用的比较少。估计我还没养成好习惯吧，很多的padding可以重用但是我不知道或者我太懒了就直接再写一遍=。=

函数

函数我用来处理兼容性了：

1
2
3
4
5
6
7
8
9
.linear-gradient(@direction,@color-bottom,@color-top){
	background-image: -webkit-linear-gradient(@direction, @color-bottom,@color-top);
	background-image: -moz-linear-gradient(@direction, @color-bottom,@color-top);
	background-image: -ms-linear-gradient(@direction, @color-bottom,@color-top);
	background-image: linear-gradient(@direction, @color-bottom,@color-top);
	@startcolor : argb(@color-bottom);
	@endcolor : argb(@color-top);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=@startcolor, endColorstr=@endcolor,GradientType=0 ); 
}

上面这个是渐变（比较简单和单一的线性渐变）。最后一个是兼容IE8以下的滤镜。用到了LESS的内置函数：argb()；方便地转换颜色格式~滤镜要用到#AARRBBGG格式的颜色，内置函数可以直接互相转化（颜色好像是一种变量类型）

混入

很重要的一个概念，也是我为什么好喜欢用LESS的原因：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.pageheader nav 
{
	top: 70px;
	left: 202px;
	background: url(../images/nav-bg.png) repeat;
	border-top: 1px solid #1D1D1D;
	border-bottom: 2px solid #161616;
	li{
		float: left;
		border-left: 1px solid #1D1D1D;
		a{
			font: normal 14px/14px "OpenSansRegular";
			display: block;
			height: 17px;
			padding: 15px 22px;
			color: #FFF;
			font-size: 14px;
			line-height: 14px;
			text-align: center;
			border-left: 1px solid #404040;
			border-top: 1px solid #404040;
			border-right: 1px solid #404040;
		}
	}
	li:last-child a{
		border-right: none;
	}
}

逻辑很清楚，而且不需要写很多长长的类名来选择。可以直接写类名来使用调用其它的类所含有的样式。像第二点中的函数：.linear-gradient(top,#fe1f1f,#da1010);这是使用方法。传入参数，用类名来调用。不过混入远不止这么简单，这里只是皮毛，以后再认真看看。

分享到