Hello Tianbao

发表于   |   分类于   |     |   次阅读

做移动开发一年多了，自己也会有一些关于移动端的思考。装逼一下啊···最开始着手移动端开发让人头疼的是适配这一块儿，从iOS到Android各种机型和操作系统让你欲罢不能，关于样式这一块是用sass+compass，所以我会最开始在utilities里面定义好使用的媒体查询。

1
2
3
4
5
@media screen and ( max-device-height: 480px){}

@media screen and ( min-device-height: 481px )  and (max-device-height: 568px){}

@media screen and ( min-device-height: 569px ) and ( max-device-height: 667px ){}

接下来的升级版

1
2
3
4
5
6
7
8
9
10
11
/* iphone 4 */
@media (device-height: 480px) and (-webkit-min-device-pixel-ratio:2) {}

/* iphone 5 */
@media screen and (device-width: 320px) and (device-height:568px) and (-webkit-min-device-pixel-ratio:2) {}

/* iphone 6 */
@media (device-width: 375px) and (-webkit-min-device-pixel-ratio:2) {}

/* iphone 6+ */
@media (device-width: 414px) and (-webkit-min-device-pixel-ratio:3.0) {}

每次去看别人家的H5活动页都会有不一样的收获，前提是非常牛逼的公司写出来的东西。页面的每个部分都会去仔细的研究一下，为什么会在这个地方使用这一段代码，就以前在页面的head部分经常会加上这样一段代码。我知道到它的作用是判断浏览器是否去引相应的JS文件，但我不明白lt、lte、gt的含义，后来自己动手去查才知道是less-than, less-than or equal, greater-than的缩写罢了。

1
2
3
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lte IE 9]><html class="no-js lte-ie9 no-wechat no-tablet mobile no-ipad zh"><![endif]-->
<!--[if gt IE 9]><html class="no-js no-wechat no-tablet mobile no-ipad zh"><![endif]-->

安卓手机浏览器版本判断并且做了相应的适配工作

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
    if (/Android (\d+\.\d+)/.test(navigator.userAgent)) {
        var version = parseFloat(RegExp.$1)
        if (version > 2.3) {
            var phoneScale = parseInt(window.screen.width) / 750
            document.write('<meta name="viewport" content="width=750,minimum-scale=' + phoneScale + ',maximum-scale=' + phoneScale + ',target-densitydpi=device-dpi">')
        } else {
            document.write('<meta name="viewport" content="width=750,target-densitydpi=device-dpi">')
        }
    } else {
        document.write('<meta name="viewport" content="width=750,user-scalable=no,target-densitydpi=device-dpi,minimal-ui">')
    }
</script>

还有一些小的技巧，比如说强制换行跟强制不换行+省略号

1
2
3
4
5
6
7

word-break: break-all;
word-break: break-word;

text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;

做电商网站的常用的卡片类型去展示，一般会加上简短的描述，所以就会涉及到两行的省略

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.line_clamp{
    height: 42px;高度的设定是需要解决撑开的问题
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    -webkit-line-clamp: 2;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
}

.line_clamp{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    -ms-word-break: break-all;
    word-break: break-all;
}

Git 学习的笔记，自己经常会使用的一些命令

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
29
git init  //初始化一个仓库

git clone + 一个地址

git status

git pull

git push

git add 文件名

git commit -a -m "提交的信息"


git push -u origin develop//创建远程分支名字

删除远程分支  git push origin :branch-name

git pull --rebase origin master

发布流程的代码：
git checkout master
git merge release-0.1
git push
git checkout develop
git merge release-0.1
git push
git branch -d release-0.1

Besides: bower是项目依赖的插件进行管理

1.bower cache: bower缓存管理
2.bower help: 显示Bower命令的帮助信息
3.bower home: 通过浏览器打开一个包的github发布页
4.bower info: 查看包的信息
5.bower init: 创建bower.json文件
6.bower install: 安装包到项目
7.bower link： 在本地bower库建立一个项目链接
8.bower list: 列出项目已安装的包
9.bower lookup: 根据包名查询包的URL
10.bower prune: 删除项目无关的包
11.bower register: 注册一个包
12.bower search: 搜索包
13.bower update: 更新项目的包
14.bower uninstall: 删除项目的包

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
1. bower init //填写相应的信息

2. 将开源项目推送到git上面,在相应的文件目录下进行操作

     git init

     git status

     git add -A

     git commit -a -m "first version"

     //接下来的几步比较重要
     git tag 0.1.0 //版本号可以自己设置

     git remote add origin git@github.com:darcyWang/tianbao.git

     git push origin master

     git push origin 0.1.0


    bower register <项目名字> <项目在git上面的地址>
    bower register tianbao https://github.com/darcyWang/tianbao

经典PS切图步骤

  1. M选择 想切区域的大小, 调整区域大小 alt+s 最后是t
  2. 把自己想要的区域选好以后 ctrl+shilft+c获取大小
  3. ctrl+n 新建对应大小的新图层
  4. 新图层的标签拉拽下来 单独在之前视图的上面
  5. 点选之前的图层 丢入新建图层， v键移动对齐
  6. ctrl+shift+alt+s 保存

说一下前端的雪碧图怎么玩？
首先确保你的电脑上已经安装好了compass和sass，可以使用命令行 compass -v和sass -v。

需要注意的是安装compass是基于ruby的 gem install compass
然后使用 compass create newprojectname创建一个新的compass项目后，查看一下文件目录结构。其实实际上我们只是用来做一个壳儿，完成以后进入这个项目，

  1. 你会看到里面有文件夹sass、文件夹stylesheets和一个config.rb配置文件，
  2. 你可以先打开配置文件看一下，里面很明确的写了一句images_dir = “images”，相信一看就知道这个图片的根目录叫images，所以你就马上新建一个名字为images的文件夹，

  3. 接着在sass文件里面创建一个新的darcy.scss文件，里面放上这段代码

    1
    2
    3
    4
    5
    @import "compass/utilities/sprites";
    @import "icon/*.png";
    @include all-icon-sprites;

    $setting-sprite-dimensions: true;

  4. 在images文件下创建icon文件夹 把需要合并的png图片放到这个文件夹下面 因为上面代码里面的第二行是icon文件夹下面的图片，当然可以按照自己的喜好来命名，开心就好

  5. 接着进入你所创建的项目，输入命令行compass compile
    你还可以自己定制化咯，在这里可以找到
    参照一下这个哥们的写法。自己最喜欢生成雪碧图后会有一个css文件，里面把所有的图标名字和位置都已经写出来了，这是非常酷的一个地方。

最后贴上一张图片，大家可以看看

今天给大家分享一个设计类的icon，方便以后自己做项目时候可以直接拿来使用的一套工具

请点击

接下来给大家带来一个非常炫酷的H5效果插件
Click it
戳这里

这篇博文会不断地更新，post一些自己遇到好的工具

先介绍一下关于video play的使用，现在的网站都开始使用一个简短的视频放在首页上作为背景，是不是非常的炫酷，
有一种可以下实现的方法叫做flowplayer。