一、目的
-
了解移动端页面开发流程
-
掌握移动端常见布局思路
技术方案
代码规范
目录规范
流程开发
蓝湖/摹客协作平台
-
UI设计师 psd效果图完成后，会上传到蓝湖//摹客里面，同时会拉前端工程师进入开发
-
大部分情况下，UI会把图片按照前端设计要求给切好
-
UI设计师 上传蓝湖到或者/摹客（了解）
* 前端设计师可以直接/摹客/蓝湖测量取值
还要下载PS2021及以上 和adobe cretive 最后将墨客插件使用上，该死我又在下载软件浪费大把时间 还好墨客很方便使用 往后还能和同事交流
适配方案
-
flex 布局
-
百分比布局
-
rem布局
-
vw/vh布局
-
响应式布局
-
本次案例 flex + rem + + flexible.js + LESS
初始化文件
-
引入 normalize.css
-
less 中 初始化body样式
-
约束范围
布局模块
-
头部模块 .header 高度为 80px
-
nav 模块制作 多用 flex
-
充电学习 阴影
给屏幕分为20等份 750/20= 3.75px 3.75px=1rem 为基准值 在cssrem的扩展设置里
开始布局前 墨客真的帮了大忙了我不用去测量每个盒子之间的距离 以及盒子的内外边距是多少
在PS里打开PSD图片 在用墨客插件把每个图层导出，记得加上画板和@×2图
导航栏部分的设定思路
导航栏部分用flex 给每个链接a设定占比为33.33%（100/9）再利用flex-wrap-wrap
以及纵向显示flex-direction: colum;
设定第一个结束后其他复制即可
&符号是指在样式中的简写 可理解成.nav item:nth-child(-n+3) 即前三个
同样是利用flex 使其两个小盒子左右两边 图片与文字垂直居中vertical-aglin:middle;
黑马面面页面案例还没学完，今天就这样啦
明天周末一起加油！
