做去哪儿网app开发,根据UI图进行设计,style要达到和UI图一样
目前在做header组件,文件名header.vue
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?
因为stylus-loader版本过高,
npm uninstall stylus-loader --save
npm install [email protected] --save
即可
父盒子用了flex,子盒子为何还要设置float?
把float删除之后,也不会有变化。暂时理解是不用写
flex:1 如果n个子盒子都没有宽度的话,则是均分父盒子的宽度
header盒子里的height直接改为line-height就可垂直居中,height不用设置了,从bgc颜色可以看出是随着行高变化,但我觉得垂直居中的话还是把height和line-height都写上比较好
.1rem即5px
学习一下移动端开发:手机端和pc端展示的页面不同,所以要开发移动端,主要指手机端。
三种视口:布局视口、视觉视口、理想视口(乔布斯发明)。最后一种是最好的,即让布局视口 === 视觉视口
物理像素就是分辨率m*n的单位,pc端里1px(CSS像素) == 1物理像素,而移动端不一定,这是因为视网膜屏幕技术,把更多的物理像素点压缩在一块屏幕里,这样可以在小的屏幕上使图片更加细腻。例如iphone8的宽是750分辨率,由于这种技术,他的开发像素就是375px,则物理像素比是2
以i8手机为例,准备的图片比实际需要的大小 大两倍,这种方式就是2倍图。比如要显示的是50px*50px,如果直接拿50*50的图片放进去,变成100*100就会模糊,所以提前准备的是2倍的尺寸,再在css里修改为50px,就会显示清楚
1.单独制作移动端页面(主流):jd,tb,sn
根据设备不同从而打开不同页面
流式布局(百分比布局)、flex(推荐)、less+rem+媒体查询、混合布局
2.响应式页面兼容移动端:三星手机官网
通过判断浏览器宽度来改变显示,缺点:考虑兼容性问题,制作麻烦
媒体查询、bootstrap
iconfont网站下载需要的图标
选择iconfont相关的文件放到travel文件中,路径关系为:
所以修改iconfont.css里文件的路径如下:
因为各个页面都要引入iconfont,所以可在main.js里引入css
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,上面的博主大概给了原因