课程目标
学习目的:
1.了解移动端页面开发流程
2.掌握移动端常见布局思路
课程大纲
01 慕客/蓝湖测量切图
02 适配方案
03 swiper移动端插件
04 图标字体上传下载
05 码云部署发布静态网站
一、方案 & 规范
1.1 技术方案
- 弹性盒子 +
rem
+LESS
- 最小适配设备为
iphone5 320px
最大设配设备为iphone8 plus
(ipad
能正常查看内容即可)
1.2 代码规范
- 类名语义化,尽量精短、明确,必须以字母开头命名,且全部字母为小写,单词之间统一使用下划线“_” 连接
- 类名嵌套层次尽量不超过三层
- 尽量避免直接使用元素选择器
- 属性书写顺序
布局定位属性:display / position / float / clear / visibility / overflow
尺寸属性:width / height / margin / padding / border / background
文本属性:color / font / text-decoration / text-align / vertical-align
其他属性(CSS3):content / cursor / border-radius / box-shadow /
text-shadow - 避免使用
id选择器
- 避免使用通配符
*
和!important
1.2 目录规范
项目文件夹:heimamm
样式文件夹:css
业务类图片文件夹:images
样式类图片文件夹: icons
字体类文件夹: fonts
二、流程开发
2.1 蓝湖/慕客协作平台
- UI设计师 psd效果图完成后,会上传到蓝湖//摹客里面,同时会拉前端工程师进入开发
- 大部分情况下,UI会把图片按照前端设计要求给切好
- UI设计师 上传蓝湖到或者/摹客(了解)
1. 摹客官网地址: https://www.mockplus.cn/ 注册一个账号
2. PS 安装摹客/蓝湖插件
3. 打开PS 摹客/蓝湖插件
4. 上传(需要切图,需要先标注切图)
5. 查看项目
6. 邀请成员进入(分享按钮,链接地址)
- 前端设计师可以直接在 摹客/蓝湖 上测量取值
2.2 适配方案
- flex 布局
- 百分比布局
- rem布局
- vw/vh布局
- 响应式布局
- 本次案例 flex + rem + flexible.js + LESS
2.3 初始化样式 & 适配
- 引入 normalize.css
- less 中 初始化body样式
- 约束范围
@media screen and (min-width: 750px) {
html {
font-size: 37.5px !important;
}
}
适配准备工作
1、复制以下的css文件、js文件到项目中,而且在html文件中引入。
2、设置body标签的最小宽度和最大宽度,来限制移动端页面的缩放范围。
body {
min-width: 320px;
max-width: 750px;
}
3、设置rem的范围。
flexible.js
作用:设置html标签的font-size属性值为当前视口宽度的1/10,而且实时监听页面视口宽度的变化,一旦变化,则会自动重新设置。即:屏幕缩放时,html标签的font-size属性值的大小也随之变化。
但是,移动端页面中,我们不希望页面的字体随着屏幕变大而一直变大,而是当超出某个值时,页面字体大小保持在一个最大值。
/* 约束当屏幕大于750px的时候,html字体大小就不变化了 */
@media screen and (min-width: 750px) {
html{
font-size: 37.5px !important;
}
}
/* 约束当屏幕小于320px的时候,html字体大小也不变化了 */
@media screen and (max-width: 320px) {
html{
font-size: 16px !important;
}
}
4、安装VSCode插件 cssrem:自动将px单位转换为rem单位。
注意需要设置基准值。
2.4 布局模块
完成准备工作后,就可以对照着设计稿,依次开发各个页面模块了。
不同设计稿的html 和css 代码都是不一样的,所以这里就不一一列举了。
2.5 swiper插件使用
官网地址:www.swiper.com.cn/
- 下载需要的css和js文件 html页面中 引入相关文件
- 官网找到类似案例,复制html结构,css样式,js语法
- 根据需求定制修改模块
2.6 图标字体的使用
比较简单,学过的都懂,这里就不赘述了。
2.7 上传码云并发布部署静态网站
前提: 码云 Pages服务 需要实名认证。
准备工作: 需要下载git软件 需要码云注册账号
git 可以把我们的本地网站提交上传到远程仓库(码云 gitee)里面 类似以前的 ftp
码云 就是远程仓库, 类似服务器
1 . 码云创建新的仓库。 heimamm
2 . 利用git 提交 把本地网站提交到 码云新建的仓库里面。
2.1) 在网站根目录右键-- Git Bash Here
2.2) 如果是第一次利用git提交,请配置好全局选项
git config --global user.name "用户名"
git config --global user.email "你的邮箱地址"
2.3) 初始化仓库
git init
2.4) 把本地文件放到暂存区
git add .
2.5) 把本地文件放到本地仓库里面
git commit -m '提交黑马面面网站'
2.6) 设置远程仓库别名
git remote add origin 你新建的仓库地址
2.7) 把本地仓库的文件推送到远程仓库 push
git push -u origin master
3 . 码云部署发布静态网站
3.1) 在当前仓库中,点击 “服务” 菜单
3.2) 选择 Gitee Pages
3.3) 选择 “启动” 按钮
3.4) 稍等之后,会拿到地址,就可以利用这个地址来预览网页了
3.5) 当然你也可以利用 草料二维码 生成二维码 cli.im/
3.6) 最后: 如果提交网站,你不愿意用git 提交, 可以直接找到仓库,里面有文件,选择上传本地文件即可。
但是,1个小时内,只能上传 20个以内的文件, 前端人员,git必备技能。
一些补充
1 . 如何在PS中安装摹客插件?
1)进入摹客官网 / 下载 / PS插件。
2)双击PS插件 exe文件,傻瓜式安装。
3)PS/窗口/扩展功能/摹客/点击即可打开摹客插件面板。
4)摹客插件 需要登录账号才能使用。
2 . PS 摹客插件的基本使用
2.1)标记切图、上传
2.2)测量
双击设计稿/开发
2.3)下载切图
一般来说,设计稿的上传和切图都是由美工来完成的,但是在练习时,只能自己来切图了。
3 . VSCode插件
Easy Less:自动将less文件编译成css文件。
cssrem:将px转换为rem。
- 需要设置基准值。
插件/设置/将Root Font Size
项设置为37.5。表示 37.5px = 1rem。
安装后需要重启,才能进行设置。 - 使用方法:在输入px单位时,会弹出自动计算后的rem值的可选项,点击该选项即可。
- cssrem 改名为 px to rem & rpx(cssrem)
4. 第三方库 & 插件 & 第三方ui
normalize.css
作用:清除标签默认样式,统一标签在不同浏览器上的外观。flexible.js
作用 :自动设置rem值(即将当前页面视口宽度的1/10 设置给html标签的font-size属性值),而且实时监听页面视口变化,重新设置。swiper.min.js
、swiper.min.css
作用 :移动端常用轮播图/滑动插件
5、适配原理
- 使用第三方库
flexible.js
动态设置rem
值。 - 使用
min-width
、max-width
限制页面的最小、最大宽度(即body标签)。 - 使用
@media
、!important
设置rem
的最大值。
即当屏幕宽度>750px时,flexible.js设置的rem值 会被 @media、!important设置的拥有最高优先级的值所覆盖。
- 给页面元素设置宽高大小时,不使用px单位,而是使用rem单位。(可以通过VSCode插件
cssrem
来完成)
6、vscode注释的快捷键是什么?
单行注释,使用 Ctrl + /
。
块注释,使用 Alt+Shift+A
。
7、 normalize.css
误区
normalize.css
并没有去掉h4标签的默认margin值,也没有去掉a标签的默认的下划线,等等。所以需要手动清除标签的默认样式。
8、LESS使用的比较少
教程中只使用了LESS中的嵌套语法,其它语法都没有使用到。
8、vertical-align: middle;
图片和文字在同一行上显示时,默认会以文字的基线对齐,但会导致图片和文字实际上并没有水平对齐。解决:给img标签设置 vertical-align: middle;
9、swiper插件的基本使用。
1)引入swiper插件的js、css文件。
<link rel="stylesheet" type="text/css" href="./css/swiper.min.css">
<script src="./js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
2)找到相似度最高的示例,复制示例的html、css、js代码。
3)根据设计稿,进行修改。
10、项目难点
1)移动端适配方案。
2)swiper插件 样式定制。
swiper轮播图示例 与设计稿效果 并不是完全相同的,所以需要我们根据设计稿,修改代码,进行样式定制。
11、viewport
移动端页面必须设置viewport。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
12、视频中没有讲到 图标字体 的使用。
13、flexible.js
默认将html标签的 font-size
属性值设置为当前视口宽度的 1/10
。但是视频中,老师将它改成了 1/20
。
官方文档
normalize.css github仓库
normalize.css 官网
normalize.css中文版
参考文章
Normalize.css 中文文档与源码解读
Normalize.css 介绍与源码解读
学习资料
视频教程:
黑马面面移动端布局开发-rem+less适配码云部署发布静态网站git上传摹客/蓝湖协作平台使用-pink老师公开课
学习资料&练习代码:
H:\学习课程\ediary日记\学习课程\移动端项目实战_黑马面面
进度:
220130-220202
码云仓库:
gitee.com/yeagelin/he…