移动端

移动端重构小节(2)

话说这个寒假还是学了不少东西的哈哈。不过做项目的时候还是感觉自己能力很不足很不足很不足（重要的事情说三遍）要多学习多学习多学习。其实做项目提升还是很大的。

看到什么就写什么。

媒体查询

做移动端和PC端会用到的东西。这也是高大上的（对我来说）响应式布局。
CSS3 @media 查询
仔细再看一遍才发现有些地方误解了。
语法：

1
2
3
@media mediatype and|not|only (media feature) {
    CSS-Code;
}

之前用的是@media all and (max-width:640px)以为前面的all是所有的尺寸=。=
其实前面的是媒体类型，后面的是媒体功能。
媒体类型主要使用：all print screen speech。看来一般用all了。
媒体功能就很多了，这里不写。一般是定义大小和分辨率。
兼容性：IE9以下需要引入JS文件：Respond.js。放到底部，并且要http协议才能用。当然会有一点延迟啦。
写在媒体查询之外的样式会应用在全网页。
后面做一个项目的时候用响应式设计，刚开始做的是移动端，设计师切好图我就直接写了。然后发现一个坑爹的事情，导致我拿到PC端的设计图时内心几乎是崩溃的。
以后最好提前和设计师沟通，不然就是在给自己挖好多好多的坑（啊）。反正以后我重构不会让设计师帮我切图了。
做这个的时候多分组吧。把内容区块包好。在不同的大小下一般是用浮动来控制内容的位置。

图片

移动端上的一个像素并不是电脑上的一个像素。一般是两个。所以在使用图片的时候，拿到640的设计图切成360的图片来使用时，在高分辨率的屏幕上看起来是很模糊的。所以图片一般还是原来的640下的大小，使用的时候规定一半的尺寸。这样在手机上看起来就会很清晰。
图片可以两种办法来引用：

  1. 直接用<img>标签。缺点是不能在不同分辨率下换图片。不过定好大小兼容性就比较好。
  2. 使用<div>标签，用CSS设置背景图片来设置图片路径。偏向用这种，可以在媒体查询的时候换图片。但是在使用的时候可能会用到一个属性：backgroud-size这个属性在IE9以下有兼容性问题。
    在做后面的页面时这两种都一起用了。不过还是根据情况的不同有取舍。

背景图片

backgroud-size: 100px 100px这样做就和直接用<img>定义长宽效果一样了。设置的大小比背景图片的尺寸小可以让背景很清晰。当最终效果比父容器大时会隐藏掉超出的部分。

background-size:100% auto
让背景图片以容器的宽为基准显示，能完全显示图片。auto不写就是默认值。当背景图片的宽比容器的宽更长的时候，宽自动等比例压缩，高也会变小，有可能出现不能完全覆盖容器的情况。和contain效果一样。

background-size:100% 100% 让背景图片以以父元素的百分比来设置背景图像的宽度和高度。容器比例和背景图片不一样时会变形。但是。有时候为了尽可能的让不同大小的屏幕都有设计图那样类似的背景位置效果，设置background-size为100% 45%之类的可以达到。根据需要还可以加上：background-position:0 0来确定显示的位置。也是用在雪碧图里。

background-size:cover
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。会隐藏掉超出的部分。

这些情况都用需要定容器的宽和高。不过这个属性有兼容性问题。比较蛋疼。简单但是麻烦的办法是，切图的时候刚好切成容器的宽和高。
测试地址：css_background-size

展示图片

有种接近全屏的图片，可以用上面的方法，也可以单独写一个<img>设置成宽100%，在父容器高度确定具体大小，超出的部分就隐藏。我用的是高宽都是100%，这样会随着屏幕的宽变大，图片变宽，高度也变高，图片不会变形。不过这样就不适合那些定好高度的容器了。就是上面写的那种，需要隐藏掉。

并排按钮

第一次做的时候是固定了按钮的宽和高，用具体的数值。但是拉伸屏幕的时候就悲剧了。而且开始是用浮动，都是向左，设定外边距。
后来就换了一种方式，先用媒体查询，一般分界线是640PX，按钮用百分比设定长宽，一个向左一个向右浮动。（欸那三个按钮怎么办 da she ji shi）。找到具体的案例再看看。

##JS和动画
其实一般的动画还是很简单的，无非就是点击变色，做单选效果，切换标签。前面用的知识就足够解决了。还有就是一些数据先处理好放在隐藏的input标签内再发送给后台。不用<input type="submit">使用<a>标签可以很方便的控制按钮的样式，在提交的时候写JS处理函数就好了：<a href="#" class="submit-btn" onclick="submit_select()">提交</a>

1
2
3
4
5
6
7
8
function submit_select () {
	var input = document.getElementById('input');
	var strings = getselect_String();
	input.value = strings;
	console.log(strings);
	var form = document.getElementById('form');
	form.submit();
}

其实还是很简单的。
不过在做TAB切换的时候发现后台有一些要求，用到了ajax:

1
2
3
$.get('http://localhost/mobile1/form_content.php?date='+date,function(data,status){
			$(".content_list")[0].innerHTML=data;
})

其实就是把TAB切换的每个TAB的内容都分别从服务器获取再放到HTML里面。
做这个的时候应该开wamp来测试。本地会有同源策略阻止访问。
另外还用到了一个滚动的JS插件：iScroll 5。教程很多可是都是4的呵呵。不过也差不多了。使用的时候加载需要一些时间，滑动在电脑上感觉很好但是手机上就有点。。估计是我没有优化好的原因。

分享到