饿了么项目.png
- 对于移动端适配的理解 常用rem作为适配方案
- 对于flex的理解
- 样式当前有效
项目初始化
- 移动端屏幕禁止缩放
- 样式初始化
- 1px解决方案
- 移动端300ms延时问题
- 项目中使用stylus
- 项目中使用iconfont **安装stylus fastclick **
cnpm install stylus stylus-loader fastclick --save项目中引入依赖
代码语言：javascript复制import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import fastClick from "fastclick"/// 300ms延时 问题
import "./assets/styles/reset.css" /// 样式初始化
import "./assets/styles/border.css" /// 1像素解决方案
Vue.config.productionTip = false
fastClick.attach(document.body);/// 300ms延时 问题
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')组件代码
代码语言：javascript复制<template>
<div>
<div class="header">
<div class="header-left">返回</div>
<div class="header-input">输入景点城市主题</div>
<div class="header-right">城市</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
}
};
</script>
<!--1rem = html font size = 50px; 如果给的是二倍图，那么px 要除以2， 再除以font size;
-->
<style lang="stylus" scoped>
.header {
height: 0.86rem;
display: flex;
background-color: #00bcd4;
color: #fff;
line-height: 0.86rem;
.header-left {
float: left;
width: 0.64rem;
}
.header-right {
float: right;
width: 1.24rem;
text-align: center;
}
.header-input {
flex: 1;
background-color #fff;
border-radius: .1rem;
margin-top: .12rem;// 上边距
height: .64rem;// 高度
line-height : .64rem;
color: #ccc;
padding-left: .2rem;
margin-left: .2rem; // 左边距
}
}
</style>1.iPhone5分辨率320x568，像素640x1136，@2x
2.iPhone6分辨率375x667，像素750x1334，@2x
3.iPhone6 Plus分辨率414x736，像素1242x2208，@3x，（注意，在这个分辨率下渲染后，图像等比降低pixel分辨率至1080p(1080x1920)
