1. 移动开发常用技巧

  • width=device-width； 设置Viewport视口宽度等于设备宽度
  • initial-scale=1； 网页默认缩放比为1(网页在手持设备上，不会进行默认缩放
  • minimum-scale=1 网页最小缩放比为1
  • maximum-scale=1 网页最小大缩放比为1
  • user-scalable=no 禁止用户手动缩放网页(ios10+ 的设备失效)

注意：此文档是本人看视频学习的手记。

2.[手机端字体样式]

  • 一般手机端不支持微软雅黑字体
  • 中文字体一般不设置，使用系统默认即可
  • 英文字体一般设置为font-family: helvetica;

（1）响应式布局：

【使用媒体查询的三种方式】：

  • 1、直接在CSS中使用：
     @media 类型(

     长选all/screen) and (条件1) and (条件2) {
    　
      CSS选择器{
    　　　　
        CSS属性：属性值;

    　　}

    }

  • 2、使2、使用link链接CSS，media属性可以设置媒体查询方式：

  • 3、使用@import导入，直接在url()后面使用空格，即那个媒体查询规则：

（2）Twitter Bootstrap

Bootstrap来自Twitter，是目前最受欢迎的前端框架，它简洁灵活，使得Web开发更加方便快捷。它有着优雅的HTMCSS规范，以及构建响应式网站的基本的组件，例如12列栅格布局、jQuery插件、Bootstrap控件等等。

（3）HTML5 Boilerplate

HTML5 Boilerplate的核心是用于帮助开发HTML5站点和应用程序的组件，它有着出色的性能和独立性，帮助你开始一个新的项目。

（4）Foundation

Foundation一款非常先进的前端框架，易用、强大而且灵活，可用于构建基于任何设备上的 Web应用，提供多种Web上的UI组件，如表单、按钮、Tabs 等等。

（5）Ulkit

Ulkit是一个轻量级、模块化的前端框架，帮助开发出快速、强大的Web接口，它有着全面的HTML、CSS和JS集合，易于使用和扩展。

（6）HTML5 KickStart

HTML5 KickStart集合了HTML5、CSS和JS，帮助开发人员快速开发Web产品，它覆盖了所有的UI组件，同时也包含一些有用的JS插件。

3.html5+css3+jquery完成响应式布局

响应式布局，流体布局，自适应布局，静态布局等等，这是移动设备的飞速发展，前端人员不得不跟上潮流的一个方向。实际上各种设备尺寸，分辨率大都不同，真的适应各种设备依旧是不现实的，首先是浏览器差异化，让我们去hack，现在是终端问题，让我展现出不同的设备不同的样式，折腾来折腾去，终于我们走进了热火朝天的响应式布局，自适应只能算是响应式布局的一个子集吧，对于流体个栅格后面会再次提到，有兴趣可以关注。

首先讲讲实现原理吧，css3的媒体查询功能的确帮了我们很大一个忙，@media query，它的出现也带出了响应式布局的一连串东西，经典的是来自国外伟人的布局这里就不多阐述，我待会儿会提出一个实际的例子，本人测试过有效。@media query它可以检查我们的设备的分辨率，但是我们往往是设置一个区间，这样一个区间一个区间的去布局代码，让我们在手机端打开是一个效果，pc端一个效果，平板一种样式。

4.jquery轮播图详解。

我在两个月以前没有接触过html,css,jquery,javascript。今天我却在这里分享一篇技术贴，可能在技术大牛面前我的文章漏洞百出，也请斧正。

可以看出来，无论是div+css布局还是jquery其实真的很简单，只要不停的练习就会有很大进步。每天150行代码，会帮助我们走的更远。对于编程对于脚本语言，我们这样的学生娃没有和比人一样初中，高中就开始研究，要想走在时代的前沿需要怎样的努力和毅力，是我们一类人需要思考的方向。

下面解释下焦点图，焦点图使用范围非常广，banner和animation很容易抓住用户的眼球，所以做好这个也就是一个网页一个app的关键之一。

5. javascript

我开始以实际的项目布局，学布局，再添加各种样式，了解基本结构。这本书也就十多天的时间我就看完了，我发现我基本能够做点简单的东西了，对这个也有一定的认识了，我知道自己是没有基础的，现在有一点点的垫底的基础了，但是我没有去觉得这就足够了，因为我还差的很远，我就看是研究动画，我给自己的要求就是我想让一个元素怎么动就怎么动，然后我开始学习了一个新的技能jquery，对于没有计算机基础的我来说理解脚本的内容有一定的难度，于是我开始放慢自己的学习进度，我想慢慢的学好这个基础框架，慢慢的我接触了DOM，选择器，动画，ajax，函数，数组等等，我发现自己还是有很多疑问，没有人可以指导我，没有关系我可以在网上找到相关的内容，大概花了一个月时间我了解清楚了这些东西，开始设计一个网站，全静态的，做出来了效果还不错，有很多Css的动画还有jquery的动画，网站给朋友看过都觉得还能看的下去。然后我发现自己对脚本的理解也开始慢慢的增加，我知道前端后端了。我仿佛又觉得我这条咸鱼开始吸水了，然后我被自己的一点点内心的满足感再次驱使我要进阶，对进阶。

6. html5/css3响应式页面的设计流程。

通过用户研究，了解用户使用的设备分布情况，确定需要兼容的设备类型、屏幕尺寸。
设备类型：包括移动设备（手机、平板）和pc。对于移动设备，设计和实现的时候注意增加手势的功能。
屏幕尺寸：包括各种手机屏幕的尺寸（包括横向和竖向）、各种平板的尺寸（包括横向和竖向）、普通电脑屏幕和宽屏。需要考虑的问题：

  • 某个页面进行响应式设计时其适用的尺寸范围是哪些？比如，1688搜索结果页面，跨度可以从手机到宽屏，而1688首页，由于结构过于复杂，想直接迁移到手机上，不太现实，不如直接设计一个手机版的首页。
  • 结合用户需求和实现成本，对适用的尺寸进行取舍。比如一些功能操作的页面，用户一般没有在移动端进行操作的需求，没有必要进行响应式设计。