项目随笔——边做边学
做去哪儿网app开发，根据UI图进行设计，style要达到和UI图一样
目前在做header组件，文件名header.vue
1.
scoped意思是样式只对当前组件有效，局部化样式
stylus是一个css框架可以让css写法更简单
移动端布局一般采用rem方式，rem是相对于reset.css里的html的font-size:50px的尺寸
1rem = html font-size =50px，因为二倍屏，量取的是86px就变为43px，对应rem就是0.86rem
reset里设置为50px的原因：对于二倍屏，如果86px，就是.86rem（本项目是二倍屏，去补一下几倍屏的知识）。
但好像在网页里量取的话是43px？
2.设置完stylus再npm run dev会报错
因为stylus-loader版本过高，
npm uninstall stylus-loader --save
npm install [email protected] --save
即可
3.疑问
父盒子用了flex，子盒子为何还要设置float？
把float删除之后，也不会有变化。暂时理解是不用写
flex:1 如果n个子盒子都没有宽度的话，则是均分父盒子的宽度
4.
header盒子里的height直接改为line-height就可垂直居中，height不用设置了，从bgc颜色可以看出是随着行高变化，但我觉得垂直居中的话还是把height和line-height都写上比较好
.1rem即5px
5.二倍图
学习一下移动端开发：手机端和pc端展示的页面不同，所以要开发移动端，主要指手机端。
三种视口：布局视口、视觉视口、理想视口(乔布斯发明)。最后一种是最好的，即让布局视口 === 视觉视口
物理像素就是分辨率m*n的单位，pc端里1px（CSS像素） == 1物理像素，而移动端不一定，这是因为视网膜屏幕技术，把更多的物理像素点压缩在一块屏幕里，这样可以在小的屏幕上使图片更加细腻。例如iphone8的宽是750分辨率，由于这种技术，他的开发像素就是375px，则物理像素比是2
以i8手机为例，准备的图片比实际需要的大小 大两倍，这种方式就是2倍图。比如要显示的是50px*50px，如果直接拿50*50的图片放进去，变成100*100就会模糊，所以提前准备的是2倍的尺寸，再在css里修改为50px，就会显示清楚
6.移动端开发主流方案：
1.单独制作移动端页面(主流)：jd，tb，sn
根据设备不同从而打开不同页面
流式布局(百分比布局)、flex（推荐）、less+rem+媒体查询、混合布局
2.响应式页面兼容移动端：三星手机官网
通过判断浏览器宽度来改变显示，缺点：考虑兼容性问题，制作麻烦
媒体查询、bootstrap
7.下载图标
iconfont网站下载需要的图标
选择iconfont相关的文件放到travel文件中，路径关系为：
所以修改iconfont.css里文件的路径如下：
因为各个页面都要引入iconfont，所以可在main.js里引入css
8.text-align
https://blog.csdn.net/weixin_44307807/article/details/85872703?utm_medium=distribute.pc_feed_404.none-task-blog-OPENSEARCH-4.nonecase&depth_1-utm_source=distribute.pc_feed_404.none-task-blog-OPENSEARCH-4.nonecas
项目里用div做返回左箭头，并给了text-align :center，上面的博主大概给了原因