仿去哪了 app 项目总结

1.首先初始化项目， 在index.html中配置适配项 ，重点：适配项是为了让用户放大缩小还是原始比例。还是1:1比例

以下适配项：width - viewport的宽度 height - viewport的高度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable - 用户是否可以手动缩放2.引入reset.css， 在src 里面的assets这里文件夹里面主页放一些样式文件,然后再这个文件夹创建一个styles，然后把reset.css放到里面（注：没有这个文件的可以去百度下载）然后再main.js入口文件引入  （重点：reset.css是重置页面样式表，在不同的手机浏览器上，不同手机默认样式是不统一了，需要把不同手机的初始化样式作为统一）

3. border.css 文件配置  （注：border.css 是为了解决移动端1像素边框问题）重点：因为我们的手机分辨率高，有的是2倍屏或者是3倍屏，如果在页面上写的是1px,但是指的是css的像素，但是在2倍屏上看实际对应的不是1个物理像素，而是2个或者三个物理像素，为了解决多倍屏里面，1像素边框会被显示成多像素的问题，所以需要引用1边框像素解决方案，需要引入这个border.css

border.css 代码： 下面是引入步骤

@charset "utf-8";
.border,
.border-top,
.border-right,
.border-bottom,
.border-left,
.border-topbottom,
.border-rightleft,
.border-topleft,
.border-rightbottom,
.border-topright,
.border-bottomleft {
    position: relative;
}

.border::before,
.border-top::before,
.border-right::before,
.border-bottom::before,
.border-left::before,
.border-topbottom::before,
.border-topbottom::after,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::before,
.border-topleft::after,
.border-rightbottom::before,
.border-rightbottom::after,
.border-topright::before,
.border-topright::after,
.border-bottomleft::before,
.border-bottomleft::after {
    content: "\0020";
    overflow: hidden;
    position: absolute;
}


/* border
 * 因，边框是由伪元素区域遮盖在父级
 * 故，子级若有交互，需要对子级设置
 * 定位 及 z轴
 */

.border::before {
    box-sizing: border-box;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border: 1px solid #eaeaea;
    transform-origin: 0 0;
}

.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topright::before,
.border-bottomleft::before {
    left: 0;
    width: 100%;
    height: 1px;
}

.border-right::before,
.border-left::before,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::after,
.border-rightbottom::before,
.border-topright::after,
.border-bottomleft::after {
    top: 0;
    width: 1px;
    height: 100%;
}

.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before {
    border-top: 1px solid #eaeaea;
    transform-origin: 0 0;
}

.border-right::before,
.border-rightbottom::before,
.border-rightleft::before,
.border-topright::after {
    border-right: 1px solid #eaeaea;
    transform-origin: 100% 0;
}

.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::before {
    border-bottom: 1px solid #eaeaea;
    transform-origin: 0 100%;
}

.border-left::before,
.border-topleft::after,
.border-rightleft::after,
.border-bottomleft::after {
    border-left: 1px solid #eaeaea;
    transform-origin: 0 0;
}

.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before {
    top: 0;
}

.border-right::before,
.border-rightleft::after,
.border-rightbottom::before,
.border-topright::after {
    right: 0;
}

.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::after {
    bottom: 0;
}

.border-left::before,
.border-rightleft::before,
.border-topleft::after,
.border-bottomleft::before {
    left: 0;
}

@media (max--moz-device-pixel-ratio: 1.49),
(-webkit-max-device-pixel-ratio: 1.49),
(max-device-pixel-ratio: 1.49),
(max-resolution: 143dpi),
(max-resolution: 1.49dppx) {
    /* 默认值，无需重置 */
}

@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49),
(-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),
(min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),
(min-resolution: 144dpi) and (max-resolution: 239dpi),
(min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
    .border::before {
        width: 200%;
        height: 200%;
        transform: scale(.5);
    }
    .border-top::before,
    .border-bottom::before,
    .border-topbottom::before,
    .border-topbottom::after,
    .border-topleft::before,
    .border-rightbottom::after,
    .border-topright::before,
    .border-bottomleft::before {
        transform: scaleY(.5);
    }
    .border-right::before,
    .border-left::before,
    .border-rightleft::before,
    .border-rightleft::after,
    .border-topleft::after,
    .border-rightbottom::before,
    .border-topright::after,
    .border-bottomleft::after {
        transform: scaleX(.5);
    }
}

@media (min--moz-device-pixel-ratio: 2.5),
(-webkit-min-device-pixel-ratio: 2.5),
(min-device-pixel-ratio: 2.5),
(min-resolution: 240dpi),
(min-resolution: 2.5dppx) {
    .border::before {
        width: 300%;
        height: 300%;
        transform: scale(.33333);
    }
    .border-top::before,
    .border-bottom::before,
    .border-topbottom::before,
    .border-topbottom::after,
    .border-topleft::before,
    .border-rightbottom::after,
    .border-topright::before,
    .border-bottomleft::before {
        transform: scaleY(.33333);
    }
    .border-right::before,
    .border-left::before,
    .border-rightleft::before,
    .border-rightleft::after,
    .border-topleft::after,
    .border-rightbottom::before,
    .border-topright::after,
    .border-bottomleft::after {
        transform: scaleX(.33333);
    }
}

 4.配置移动端点击300ms延迟问题，重点：它指的是在移动端开发中，在某些机型上，某些浏览器上当时使用click事件的时候会延迟300ms再执行，这时候click事件体验就不好了，为了解决这个问题，可以引入fastclick这个库

cmd命令下载 

• npm install fastclick --save // 终端下载fastclick

下载完成

 引入

 5.iconfont图标引入及使用  创建好项目，下载使用的图标即可

 5.stylus 使用和安装  （注：Stylus是一个CSS预处理器，提供一种高效、动态和富有表现力的方式来生成CSS。Stylus 比较激进，利用缩进、空格和换行来减少需要输入的字符。不过同时也兼容CSS语法。使用最多的是:变量（variables），代码混合（ mixins），嵌套（nested rules）以及 代码模块化(Modules)。复用，逻辑能力和抽象能力。）和less sass这些预处理器类似

首先在项目中 cmd命令中  npm install stylus --save安装

 npm install stylus-loader  --save 安装

 安装stylus-loader有个报错 一个小细节，首先修改一下package.json 修改一下这两个版本号为如图所示，然后删除依赖，重新下载依赖

初始化完毕

首页布局

头部区域： 三个部分组成