项目随笔——边做边学

 

做去哪儿网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，上面的博主大概给了原因