git+web移动端开发

git

git概念

简介
Git是一个分布式版本控制系统，用于跟踪文件和目录的更改，以便多人协作开发项目时可以有效地管理和维护代码。以下是关于Git的简单介绍：

1. 版本控制：Git允许开发人员跟踪文件和目录的更改历史。每次更改都会记录下来，以便可以轻松地查看和恢复先前的版本。
2. 分布式系统：与许多其他版本控制系统不同，Git是一种分布式版本控制系统，每个开发人员都有一个完整的代码仓库的副本。这使得在没有网络连接的情况下可以继续工作，并且更容易支持多人协作。
3. 分支管理：Git允许开发人员创建多个分支，每个分支可以独立开发功能或修复问题。这使得并行开发成为可能，而不会干扰主要代码库。
4. 提交（Commit）：每次更改都需要通过提交来保存。提交包括更改的描述以及作者信息。这些提交按照时间线排列，构成代码的历史记录。
5. 合并（Merge）：当一个分支上的工作完成时，可以将其合并回主要分支或其他分支。Git会自动处理合并冲突，以确保代码的完整性。
6. 远程仓库：Git支持将代码库与远程仓库连接，允许多人协作开发。最常见的远程仓库托管平台包括GitHub、GitLab和Bitbucket。
7. 分布式开发：Git使开发人员可以在本地工作，然后将更改推送到远程仓库。这种方式允许开发人员独立工作，然后定期同步其更改。
8. 分布式历史：Git的版本历史非常强大，可以跟踪每个文件的每个更改，包括作者、时间戳和更改内容。

结构

文件状态（四者不互斥，可重合）

untrack

• 我们新创建的文件其实就是系统里的“新生儿”。在我们将它们记录在案之前，它们的状态就是untrack。所以当你在一个git项目当中新建了文件的时候，
• 如果你用git status命令去查看git当中的状态，就会看到系统会提示你有些文件状态是untrack。
• 我们可以用git add命令来track它

modified

• modified顾名思义就是修改过的意思。针对的就是已经登记在案的文件最近又发生了改动的情况，也就是说我们最近改过了某一个之前已经登记在案的文件，那么当我们查看状态的时候得到的就是modified
• 可以使用git add命令来将它更新
• 或者是使用git restore命令来取消这个文件的登记信息，也就是让他回到untrack的状态

staged

• 暂存状态，当我们创建了新的文件，或者是有了新的改动，执行git add之后，得到的状态就是staged。

committed

• committed表示的已提交。前面说了staged只是暂存，还没有真正提交进git系统当中。只有通过命令git
  commit之后，才算是真正把暂存区的代码提交了。
• 经过git commit命令之后，所有被提交的文件的状态就是committed。
• git commit之后，我们就可以通过git push来把本地的改动同步到远程了。

git命令与操作

首先的首先，打开git bash

本地仓库(repository)常用相关操作及命令

身份说明（名字与邮箱）

命令：

git config --global user.name "用户名"
git config --global user.email 123@123.com

建立本地仓库(repository)

• 在电脑上任意位置创建空文件夹
• 进入这个目录，右击打开git bash
• 执行命令

git init

• 如果创建成功可以在文件夹下看到隐藏的git文件

查看当前状态

命令：

git status

工作区(workspace)添加到暂存区(index)

命令：

单文件：git add 文件名
多文件：git add 文件1 文件2
将所有文件加入到暂存区：git add.

提交至版本库(repository)

命令：

git commit-m "注释内容" //index中内容,注释内容可以是中文

查看提交日志

git log
//git log –-all 显示所有分支
//git log ––pretty=online 显示在一行
//git log ––abbrev-commit 使得输出的commit更简洁
//git log ––graph 以图的形式输出

版本回退

git reset --hard "commitID"
commitID用git log或git-log查看
git reflog查看删除记录

远程仓库(remote)常用相关操作及命令

远程仓库的创建

远程仓库的链接

复制远程仓库链接

本地链接远程仓库

命令：

git remote add 仓库名 仓库链接

提交线上仓库

命令：

git push 仓库名 分支名//密码用github开发者设置里生成的token

拉取线上仓库（多人协同）

命令：

git pull 远程主机名 远程分支名:本地分支名

git分支

首先我们得知道， GIT分支包括本地分支 跟 远程分支：

有时远程有的分支我们本地没有（其他同事维护的分支）， 或者本地有的分支远程没有（修复线上小问题开的本地小分支）；以下具体说下如何创建本地分支：

创建本地分支：

新分支都是基于原有分支创建， 而在实践开发中基本从线上分支（与线上代码同步的分支）： master 分支创建。
而 从master创建本地分支也有两种方式：基于本地master分支创建分支、基于线上master分支创建分支；

基于本地master分支创建分支（命令窗口进入工程根目录）：

查看当前是否在master分支：

git branch// 查看本地分支信息

绿色分支表示其为当前分支，所以得切换至master分支

git checkout master
git pull
git checkout -b newBranchName

“git checkout master” 切换到本地master分支;

“git pull” 更新本地master分支代码至最新（如 本地master分支未关联远程master分支，“git pull origin master”）;

“git checkout -b newBranchName” 基于本地master分支代码创建新分支：newBranchName,并切换到该分支;

移动端web开发

移动端web开发基础

基础

手机浏览器现状

• 种类：移动端的浏览器主要包括Android Browser 和 Mobile Safari，以及国产浏览器。
• 内核：浏览器的内核主要是Webkit内核，对HTML5提供了很好的支持。

手机屏幕现状
移动端设备屏幕尺寸非常多，碎片化严重。
Android设备有多种分辨率：480x800, 480x854, 540x960,720x1280，1080x1920等，还有传说中的2K，4k屏。
近年来iPhone的碎片化也加剧了，其设备的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等。
作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是 px 。
屏幕尺寸非常多，手机分辨率和大小也不尽相同，碎片化严重。

移动Web开发注意点
移动端设备页面的结构不能过于复杂。
移动端操作方式更加丰富，如摇一摇、双指放大、滑动、双击、单击等。

视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口

布局视口layout viewport

• 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
• iOS, Android基本都将这个视口分辨率设置为
  980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

视觉视口 visual viewport

• 字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。
• 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。

理想视口 ideal viewport

• 理想视口，为了使网站在移动端有最理想的浏览和阅读宽度而设定，对设备来讲，是最理想的视口尺寸
• 需要手动添写meta视口标签通知浏览器操作
  meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽
• meta视口标签写法：
  

二倍图

二倍图（Retina图、高清图）是一种用于高分辨率屏幕的图像处理技术，旨在提供更清晰的图像和图形。这个概念最初在苹果公司的产品中得到广泛应用，特别是在Retina显示屏上，因此也被称为“Retina图”。

二倍图的概念基本上是创建一个具有更高分辨率的图像，然后在高分辨率屏幕上显示它，以获得更清晰、更锐利的图像。这对于高分辨率设备如智能手机、平板电脑和高分辨率电视等非常重要。以下是二倍图的一些关键特点和原理：

• 像素密度增加：在二倍图中，图像的分辨率通常是标准分辨率图像的两倍。这意味着在相同的物理尺寸上，有更多的像素，从而提供更高的像素密度。
• 高清晰度和锐度：由于像素密度更高，二倍图在高分辨率屏幕上看起来更加清晰和锐利。文本、图标和细节都更加清晰可辨。
• 适应高分辨率屏幕：高分辨率屏幕如Retina显示屏具有更多的像素，因此如果在这些屏幕上使用标准分辨率图像，图像可能会显得模糊或失真。二倍图能够适应这些屏幕，提供更好的视觉体验。
• 高质量显示：在高分辨率屏幕上，二倍图的图像质量比标准分辨率图像更高，这对于图像、视频和应用界面都是重要的。
• 创建过程：创建二倍图通常需要使用专门的图像编辑工具，如AdobePhotoshop，以增加图像的分辨率，并确保图像保持高质量。通常，二倍图的尺寸是标准分辨率图像的两倍，例如，一个标准分辨率图像如果是100x100像素，那么对应的二倍图就是200x200像素。

移动端常见布局

流式布局（百分比布局）

• 内容自适应：流式布局会根据设备的屏幕宽度自动调整内容的大小和位置，以适应不同屏幕尺寸。
• 百分比宽度：使用百分比来定义元素的宽度，使其相对于父容器的宽度自适应。

flex 弹性布局

父项常见属性:

• flex-direction
  flex-direction属性决定了主轴的方向，注意这个属性是给父元素设置的。
  • row：默认值，从左到右
  • row-reverse：从右到左
  • column：从上到下
  • column-reverse：从下到上
• justify-content
  这个属性定义了子项目在主轴上的对齐方式。(下面图示均为主轴为x轴正方向的情况)
  • flex-start：默认值，从头部开始，如果主轴是x轴，则从左到右
  • flex-end：从尾部开始排列
  • center：在主轴居中对齐(如果主轴是x轴则水平居中)
  • space-around：平分剩余空间
  • space-between：先两边贴边 再平分剩余空间
• flex-wrap属性
  默认情况下，所有的子项目都是排列在一条线上的，也就是说默认不换行。当所有子项目的总宽度大于父元素的宽度的时候，子项目会均分父元素的宽度。
• align-item属性(单行)
  该属性是设置侧轴上的子元素排列方式（上面那个flex-direction是设置在主轴的），也就是说，如果想要让子项目水平垂直居中，相当于实现项目在主轴和侧轴上的居中。align-item属性是控制子项在侧轴(默认是y轴)上的排列方式，可以在子项为单行的时候使用。
  • flex-start：默认值，从上到下
  • flex-end：从下到上
  • center：挤在一起居中(垂直居中)
  • stretch：拉伸，用这个的时候子盒子不要给高度。设置这个属性后盒子会沿着侧轴拉伸
• align-content(多行)
  上面那个align-items属性针对单行的子项目，而align-content适用于子项出现换方(多行)的情况，在单行下是没有效果的。
  • flex-start：默认值，在侧轴的头部开始排列
  • flex-end：在侧轴的尾部开始排列
  • center：挤在一起居中(垂直居中)
  • space-around：子项在侧轴平分剩余空间
  • space-between：子项在侧轴先分布在两头、再平分剩余空间
  • stretch：设置子项元素高度平分子元素高度，同样的，子项不能设置高度，盒子沿着侧轴拉伸
• flex-flow属性
  flex-flow是flex-direction + flex-wrap的复合属性。

flex-diection: column;
flex-wrap: wrap;
相当于： 
flex-flow: column wrap;

子项常见属性(设置子元素)

• flex属性 flex属性定义子项目分配剩余空间，用flex来表示占多少份数
• align-self控制子项自己在侧轴上的排列方式
  align-self属性可覆盖align-items属性，默认值为auto，表示继承父元素align-items属性，如果没有父元素，则等同于strech；
• order属性定义项目的排列顺序 数值越小，排列越靠前，默认为0.

less+rem+媒体查询布局

less

less语法：是一门CSS扩展语言，也是CSS预处理器
它在CSS的语法基础上，引入了变量，Minxin（混入），运算以及函数等功能，大大简化了CSS编写
注：第一次使用的时候需要下载less，之后安装less插件-Easy LESS - 安装后，一保存less文件，自动生成一个css文件，直接导入css文件就好

//less变量   @变量名：值    （不能数字开头，不能加特殊字符，区分大小写）
// 定义一个粉色的变量 
@color: pink;
@font14: 14px;
//2：less语法的引用
div {
    color: @color2;
    font-size: @font14;
}

less嵌套

.header {
    width: 200px;
    height: 200px;
    background: yellow;

    // 子元素的样式直接写在父元素里面就好
    a {
        color: blue;

        // 注意：若是没有加&,则解析为父选择器的后代，加了&后，便是父元素自身或者父元素的伪类
        &:hover {
            color: pink;
        }
    }
}

less语法之中的运算

注意：两个数参与运算，最后以有单位的为主。两个数都有单位，以前面的单位为准
@border: 5px + 5; 
.box {
    width: 100px - 20;
    height: 100px /2;
    border: @border solid red;
}

生成的 css ：

div{
    border: 10px solid red;
}

rem

rem (root em)是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。
比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。

 <style>
      html {
        font-size: 12px;
      }//设置1rem等于多少个px
      .box {
        width: 10rem;
        height: 10rem;
        background-color: orange;
        font-size: 1.5rem;
        color: #fff;
        text-align: center;
        line-height: 10rem;
      }
    </style>
  </head>
  <body>
    <div class="box">hello rem</div>
  </body>

媒体查询

媒体查询的语法：
注意：媒体查询使用时需要注意的是它是CSS的内容，后面的规则会覆盖前面的规则

@media 查询条件 {
    CSS代码;
}
/* 查询条件可以是媒体类型或是媒体特性，也可以是由and、not、only、or修饰组合而成的短语 */
/* 多个条件也可以用 ，（逗号）连接，相当于 or */
/* 媒体特性需要用圆括号包围 */

媒体类型：

媒体特性：

关键字：

引入：
当样式比较繁多的时候，我们可以针对不同的媒体使用不同stylesheets（样式表）。可以直接在link中判断设备的尺寸，然后引用不同的css文件。

<link media="mediatype and/not/only (media feature)" href="css.css">