移动端 - 实战篇 - 黑马面面项目

2,250 阅读8分钟

课程目标

学习目的:
1.了解移动端页面开发流程
2.掌握移动端常见布局思路

课程大纲

01 慕客/蓝湖测量切图
02 适配方案
03 swiper移动端插件
04 图标字体上传下载
05 码云部署发布静态网站

一、方案 & 规范

1.1 技术方案

  1. 弹性盒子 + rem + LESS
  2. 最小适配设备为 iphone5 320px 最大设配设备为iphone8 plus(ipad能正常查看内容即可)

1.2 代码规范

  1. 类名语义化,尽量精短、明确,必须以字母开头命名,且全部字母为小写,单词之间统一使用下划线“_” 连接
  2. 类名嵌套层次尽量不超过三层
  3. 尽量避免直接使用元素选择器
  4. 属性书写顺序
    布局定位属性: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
  5. 避免使用 id选择器
  6. 避免使用通配符 *!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文件中引入。

image.png image.png

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) 在当前仓库中,点击 “服务” 菜单

image.png

3.2) 选择 Gitee Pages

image.png

3.3) 选择 “启动” 按钮

image.png

3.4) 稍等之后,会拿到地址,就可以利用这个地址来预览网页了

image.png

3.5) 当然你也可以利用 草料二维码 生成二维码 cli.im/

image.png

3.6) 最后: 如果提交网站,你不愿意用git 提交, 可以直接找到仓库,里面有文件,选择上传本地文件即可。

image.png

image.png

但是,1个小时内,只能上传 20个以内的文件, 前端人员,git必备技能。

一些补充

1 . 如何在PS中安装摹客插件?
1)进入摹客官网 / 下载 / PS插件。
2)双击PS插件 exe文件,傻瓜式安装。
3)PS/窗口/扩展功能/摹客/点击即可打开摹客插件面板。
4)摹客插件 需要登录账号才能使用。

2 . PS 摹客插件的基本使用
2.1)标记切图、上传

qietu_shangchuan.gif

2.2)测量
双击设计稿/开发

2.3)下载切图

qietu_xiazai.gif

一般来说,设计稿的上传和切图都是由美工来完成的,但是在练习时,只能自己来切图了。

3 . VSCode插件

Easy Less:自动将less文件编译成css文件。

cssrem:将px转换为rem。

  1. 需要设置基准值。
    插件/设置/将 Root Font Size 项设置为37.5。表示 37.5px = 1rem。
    安装后需要重启,才能进行设置。
  2. 使用方法:在输入px单位时,会弹出自动计算后的rem值的可选项,点击该选项即可。
  3. cssrem 改名为 px to rem & rpx(cssrem)

px2rem.gif

4. 第三方库 & 插件 & 第三方ui

  • normalize.css
    作用:清除标签默认样式,统一标签在不同浏览器上的外观。
  • flexible.js
    作用 :自动设置rem值(即将当前页面视口宽度的1/10 设置给html标签的font-size属性值),而且实时监听页面视口变化,重新设置。
  • swiper.min.jsswiper.min.css
    作用 :移动端常用轮播图/滑动插件

5、适配原理

  1. 使用第三方库 flexible.js 动态设置 rem 值。
  2. 使用 min-widthmax-width 限制页面的最小、最大宽度(即body标签)。
  3. 使用 @media!important 设置 rem 的最大值。
    即当屏幕宽度>750px时,flexible.js设置的rem值 会被 @media、!important设置的拥有最高优先级的值所覆盖。

image.png

  1. 给页面元素设置宽高大小时,不使用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代码。

swiper.gif

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

官方文档

摹客

flexible.js

normalize.css github仓库
normalize.css 官网
normalize.css中文版

swiper中文网

码云

草料二维码

参考文章

Normalize.css 中文文档与源码解读
Normalize.css 介绍与源码解读

学习资料

视频教程:
黑马面面移动端布局开发-rem+less适配码云部署发布静态网站git上传摹客/蓝湖协作平台使用-pink老师公开课

学习资料&练习代码:
H:\学习课程\ediary日记\学习课程\移动端项目实战_黑马面面

进度:
220130-220202

码云仓库:
gitee.com/yeagelin/he…

在线预览:
yeagelin.gitee.io/heimamm