Part1 HTML网页开发 模块4 移动端开发

时间：2023-07-25 09:39:01 | 来源：网站运营

时间：2023-07-25 09:39:01 来源：网站运营

Part1 HTML网页开发 模块4 移动端开发：

文章内容输出来源：拉勾教育大前端就业集训营

模块四：移动端网页应用开发及项目

随着移动互联网的深入发展，移动端开发逐渐成为前端开发的一个很重要的组成部分，在移动端页面适配这块，我们有多种方案可以进行选择，例如流式布局、flex 布局、rem 布局、响应式布局等，本模块将带你掌握主流的开发方法和制作技巧，为后续移动端开发做出铺垫。

Mission1：移动端开发基础

一、移动web开发基础

1、浏览器现状

移动端的浏览器内核大多都是基于webkit开发而来，所以在处理移动端webH5和css3开发兼容问题时，一般只要处理主流浏览器和webkit内核兼容就ok了 。

2、手机屏幕现状

3、常见移动端屏幕尺寸

4、移动端调试方法

- 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器；
- 使用外网服务器，直接IP或域名访问。

二、视口

视口(viewport)就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。

最早是由苹果公司在推出iPhone手机时发明的，其目的是为了让iPhone的小屏幕尽可能完整显示整个网页。通过设置视口，不管网页原始的分辨率尺寸有多大，都能将其缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。在苹果公司引入视口的概念后，大多数的移动开发者也都认同了这个做法。

布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。根据设备的不同，布局视口的默认宽度有可能是768px、980px或1024px等，这个宽度并不适合在手机屏幕中展示。移动端浏览器之所以采用这样的默认设置，是为了解决早期的PC端页面在手机上显示的问题。

iOS, Android基本都将这个视口分辨率设置为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

视觉视口是指用户正在看到的网站的区域，等同于移动设备的浏览器窗口的宽度

三、物理像素和物理像素比

1、设备像素/物理像素(device pixel):

物理像素即设备像素，是物理概念，指的是实实在在的用来构成显示图片等网络资源的设备屏幕的电子小晶格，称作“物理像素点”，即由物理材料做成的实实在在的事物。比如iPhone 6/7/8的分辨率750 x 1334，那么水平方向上有750个电子小晶格，竖直方向上有1334个电子小晶格。

2、物理像素比：dpr=物理像素/逻辑像素

四、2倍图

实现原理：如移动端要用50×50的物理像素清晰地显示图片，选用逻辑分辨率为100×100的图片，将其尺寸设置为50×50,即可清晰显示。

<!-- 二倍图-img标签实例 --><img src="./images/gold-coin@2x.png" width="50" height="50" alt="@2x">背景图同样需要考虑设置尺寸处理,因设别分辨率原因带来的图片模糊问题

div.bg-img{ width: 50px; height: 50px; /* 选用二倍图 */ background-image: url(./images/gold-coin@2x.png); /* 设置尺寸大小 */ background-size: 50px 50px; }<!-- 二倍图-背景图实例 --><div class="bg-img"></div>

五、移动端开发方案选择

1、主流开发方案

①（移动端）独立界面开发 ——推荐指数：★★★★★

移动端和PC端是不同的代码；通常域名带有m（即mobile）字母前缀；适用于大型网站开发，可以减少兼容性处理成本。

②响应式兼容开发 ——非强制，不推荐

移动端和PC端公用一套代码。（原理）捕捉不同屏幕宽度，在不同屏幕宽度下，呈现不同的显示样式，实现PC端和移动端的兼容显示；（问题）开发者需要花费大量精力处理兼容问题。

六、（移动端开发）常见技术问题解决方案

1、浏览器兼容

2、CSS初始化 normalize.css

不同于PC端开发的reset.css清楚浏览器默认样式，normalize.css是统一一套移动端开发的初始化样式。

3、盒模型选择

①传统-外扩-content盒模型（推荐：响应式兼容开发）

width = content

②CSS3-内缩-border盒模型（推荐：移动端）

width= border + padding + content

4、特殊样式处理

七、移动端开发技术选型

Mission2：流式布局-京东项目

一、流式布局原理

又名“百分比布局”或“非固定像素布局”，即将盒子的宽度设置为百分比宽度，根据设备屏幕的宽度或者父级盒子宽度自动伸缩的布局方式。是常见移动端web开发方式。

Tips：通常需要设置max-width和min-width。

二、京东-移动端首页制作（准备阶段）

1.技术选型

①开发方案：独立界面开发

②布局技术：流式布局

2、项目文件结构搭建

3、基本信息配置

4、CSS分层管理

5、特殊样式处理

三、京东-移动端首页制作（正式开发）

1、Tips顶部提示区制作

<!-- 顶部tips 区域开始 --> <div class="top-tips"> <div class="close-btn"><img src="https://m.360buyimg.com/mobilecms/jfs/t19480/10/1439571805/820/787bec2c/5ac9d730N04e6d766.png" alt="关闭按钮图片"></div> <div class="logo"><img src="https://img11.360buyimg.com/jdphoto/s80x80_jfs/t27847/91/107794072/6854/14716732/5b850ecaN644d2983.png" alt="京东LOGO图片"></div> <div class="text">打开京东App，购物更轻松</div> <div class="open-app">立即打开</div> </div> <!-- 顶部tips 区域结束 -->


/* <!-- 顶部tips 区域 --> *//* 父级容器 */.top-tips{ width: 100%; height: 45px; background-color: #232326; color: #fff; text-align: center; line-height: 45px;}/* 子元素 */.top-tips div{ float: left;}/* 1、关闭按钮 */.top-tips .close-btn{ width: 8%;}.top-tips .close-btn img{ width: 10px; vertical-align: middle;}/* 2、LOGO */.top-tips .logo{ width: 10%;}.top-tips .logo img{ width: 30px; vertical-align: middle;}/* 3、文本提示 */.top-tips .text{ width: 57%;}/* 4、打开app按钮 */.top-tips .open-app{ width: 25%; height: 45px; background-color: #F63515;}

2、顶部search区域制作

html

<!-- 顶部search区域 开始 --> <div class="top-search_box"> <div class="menu_left"> <span></span> </div> <div class="input_center"> <span class="jd-logo"></span> <span class="search-icon"></span> <input class="input-area" type="search" placeholder="鼠标键盘套装"> </div> <div class="login_right">登录</div> </div> <!-- 顶部search区域 结束 -->css

/* <!-- 顶部search区域 开始 --> */.top-search_box{ position: fixed; left: 0; top: 45px; width: 100%; height: 45px; background-color: #F63515;}/* 1、左侧菜单 */.top-search_box .menu_left{ position: absolute; left: 0; top: 0; width: 40px; height: 45px;}.top-search_box .menu_left span{ display: block; width: 20px; height: 18px; margin: 14px 0 0 15px; background: url(../images/index_top-search_menu-icon.png) no-repeat 0 0; background-size: 20px 18px;}/* 2、中间输入部分 */.top-search_box .input_center{ position: relative; height: 30px; margin: 7px 50px; border-radius: 15px; background-color: #fff;}.top-search_box .input_center span.jd-logo{ position: relative; float: left; width: 20px; height: 15px; margin: 8px 8px 0 15px; background: url(../images/index_top-search_input_jd-logo.png) no-repeat 0 0; background-size: 20px 15px;}.top-search_box .input_center span.jd-logo::after{ position: absolute; right: -8px; content: ''; width: 1px; height: 15px; background-color: #ccc;}.top-search_box .input_center span.search-icon{ float: left; width: 18px; height: 15px; margin: 8px 0 0 15px; /* 精灵图二倍图处理 */ /* 缩小一半 */ background-size: 200px; /* 引入 */ background: url(../images/jd-sprites.png) no-repeat 0 0; /* icon定位 */ background-position: -82px 0;}.top-search_box .input_center input.input-area{ position: absolute; left: 0; top: 0; width: 100%; height: 30px; padding: 0 20px 0 78px; border: none; background-color: transparent; font-size: 12px; /* 清除聚焦时的边框 */ outline: none;}/* 3、右侧登录 */.top-search_box .login_right{ position: absolute; right: 0; top: 0; width: 40px; height: 45px; color: #fff; text-align: left; line-height: 45px;}

3、焦点图banner轮播区域制作

4、滑动轮播图

/* 轮播图 */.banner ul.carousel{ position: relative; margin: 0; list-style: none;}.banner ul.carousel li{ position: absolute; top: 0; left: 0; box-sizing: border-box; width: 100%; height: 200px; padding: 45px 3.33% 0;}.banner ul.carousel li:nth-child(2){ left: 100%;}.banner ul.carousel li:nth-child(3){ left: 200%;}.banner ul.carousel li:nth-child(4){ left: 300%;}.banner ul.carousel li:nth-child(5){ left: 400%;}.banner ul.carousel li:nth-child(6){ left: 500%;}.banner ul.carousel li:nth-child(7){ left: 600%;}.banner ul.carousel li:nth-child(8){ left: 700%;}.banner ul.carousel li a{ display: block;}.banner ul.carousel li a img{ display: block; width: 100%; border-radius: 10px;}

5、促销活动 promotion 制作

6、新人专享 new-one

Mission3：flex布局-携程网项目

一、flex布局体验

1、传统布局vs flex布局

二、flex布局原理

三、flex布局常用属性

1、父级容器（flex-container）常用属性

2、子级内容（flex-item）常用属性

四、flex案例——携程网首页

1.技术选型

①开发方案：独立界面开发

②布局技术：flex布局

2、项目文件结构搭建

3、理想视口配置

4、标签页配置

5、CSS分层管理

6、公共样式-基础样式初始化

7、模块分析和命名

8、顶部搜索框制作

/* 顶部搜索框 */.top-search{ display: flex; align-items: center; box-sizing: border-box; width: 100%; padding-left: 12px; padding-right: 4px;}/* - 左侧搜索盒子 */.top-search .search-box-left{ flex: 1; display: flex; align-items: center; box-sizing: border-box; height: 28px; padding: 2px 5px; border-radius: 14px; background-color: #fff;}.top-search .search-box-left::before{ content: ''; width: 35px; height: 28px; background: url(../images/home-common-sprite2x@v7.15.png) no-repeat 15px 7px; background-size: 21px auto;}.top-search .search-box-left span{ font-size: 15px; color: #666;}/* - 右侧我的 */.top-search .mine-right{ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 51px; height: 44px;}.top-search .mine-right::before{ content: ''; display: block; width: 22px; height: 22px; background: url(../images/home-common-sprite2x@v7.15.png) no-repeat 0px -36px; background-size: 21px auto;}.top-search .mine-right span{ font-size: 12px; color: #fff; line-height: 12px;}

9.焦点图布局

10、本地服务导航

11.服务导航

12.功能导航

13.热门活动

五、rem布局-苏宁项目

【基础知识】

原理：通过媒体查询，更改html字号，调整缩放整个界面

less常见问题：

less 运算除法失效解决

【正式项目】

1.技术选型

2.搭建项目文件结构

3.配置移动端理想视口和移动端样式初始化

4.设置公共common.less文件

5.index.less文件

6.body样式

7.top-banner区域

8.header区域

9.banner区域

div.banner{ width: (750rem / @baseSize); height: (260rem / @baseSize); background: url(../images/banner_bg.png) no-repeat 0 0; background-size: (750rem / @baseSize) auto; div.wrapper{ position: relative; width: (702rem / @baseSize); height: 100%; border-radius: (24rem / @baseSize); margin: 0 (24rem / @baseSize); background-color: yellow; overflow: hidden; ul.carousel{ position: relative; width: (2000rem / @baseSize); height: 100%; li{ position: absolute; left: (702rem / @baseSize); top: 0; width: (702rem / @baseSize); height: 100%; &.current{ left: 0; } a{ width: 100%; img{ width: 100%; height: 100%; } } } } ol.index-btn{ position: absolute; bottom: (12rem / @baseSize); left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: (10rem / @baseSize); li{ width: (8rem / @baseSize); height: (8rem / @baseSize); border-radius: (8rem / @baseSize); margin: 0 (5rem /@baseSize); background-color: rgba(0, 0, 0, 0.3); &.current{ width: (18rem / @baseSize); background-color: #fff; } } } }}

10.nav区域

11.技术方案2——flexible.js实现苏宁移动端界面

作用：实时根据屏幕宽度，调整界面元素的尺寸

原理：通过js浏览器器对象，读取视口宽度数据，并设置HTML字体大小

我的思考：事实上我们自己就可以编写这么一个函数，监听浏览器屏幕宽度变和大小数据，实时设置HTML字体大小。不一定要用它这个。（学过js的完全可以自己写，不一定要用它这个）

①技术选型

②项目文件结构

③理想视口配置和js引入

④开发便捷工具 cssrem VScode插件

根据设置图调整单位转换的参考根尺寸的px步骤：文件>首选项>设置>拓展>cssrem configuration>root font size

Mission5：响应式布局——阿里百秀项目

本章核心技术

一、导读

移动端开发的两种技术选型

①独立开发

②响应式兼容开发（同时适配PC端和移动端）

二、响应式开发原理和制作方法

原理：通过媒体查询，针对不同屏幕宽度给出不同的布局和样式，适配不同屏幕尺寸设备

三、响应式布局容器

目的是根据不同的屏幕宽度，设置最佳的用户体验布局。（主要是版心）

四、bootstrap框架

1.简介

2.使用方法

①创建文件结构

②创建HTML骨架结构

③引入bootstrap.css样式

④调用bootstrap预设样式

方法：其实就是调用写好的类名，就可以用样式了。

3.布局容器

4.栅格系统

五、阿里百秀项目

1.技术选型

2.屏幕划分分析

3.搭建文件结构和配置初始html

<!-- 规定IE浏览器使用最新内核渲染 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 理想视口配置 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>04-bootstrap-布局容器</title> <!-- 引入bootstrap样式表 --> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <!-- IE浏览器兼容html5 和 媒体查询 --> <!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> <![endif]-->

4.修改container宽度

5.主体结构搭建

6.LOGO区域

六、移动端开发-总结

【模块直播】

一、总复习

二、图片格式

三、img标签底部空白

1、将图片转换为块级对象可去掉下边空白

　　即设置img为：display:block;

2、设置图片的垂直对齐方式

　　即设置图片的vertical-align属性为“top，text-top，bottom，text-bottom”也可以去掉下边空白。

　　3、设置父对象的文字大小为0px

　　即在父对象中添加一行：font-size:0;可以解决空白问题，但这也引发了新的问题，在父对象中的文字都无法显示，就算文字部分被子对象括起来，设置子对象文字大小依然可以显示，但在CSS效验的时候会提示文字过小的错误。

　　4、设置图片的浮动属性也可去掉空白

　　即设置img元素float，如果要实现图文混排，这种方法是很好的选择。

　　5、设置父对象行高为0

　　top 和 bottom 之间的值即为 line-height。假如把 line-height 设置为0，那么 baseline 与 bottom 之间的距离也变为0，那道空白也就不见了

　　6、改变父对象的属性

　　如果父对象的宽、高固定，图片大小随父对象而定，那么可以设置：overflow:hidden;来去掉空白

四、link标签书写位置

五、阴影和图形绘制

适合绘制由单一元素拼合而成的图形