Part1 HTML網(wǎng)頁開發(fā) 模塊4 移動端開發(fā)

時間：2023-07-25 09:39:01 | 來源：網(wǎng)站運營

時間：2023-07-25 09:39:01 來源：網(wǎng)站運營

Part1 HTML網(wǎng)頁開發(fā) 模塊4 移動端開發(fā)：

文章內(nèi)容輸出來源：拉勾教育大前端就業(yè)集訓營

模塊四：移動端網(wǎng)頁應用開發(fā)及項目

隨著移動互聯(lián)網(wǎng)的深入發(fā)展，移動端開發(fā)逐漸成為前端開發(fā)的一個很重要的組成部分，在移動端頁面適配這塊，我們有多種方案可以進行選擇，例如流式布局、flex 布局、rem 布局、響應式布局等，本模塊將帶你掌握主流的開發(fā)方法和制作技巧，為后續(xù)移動端開發(fā)做出鋪墊。

Mission1：移動端開發(fā)基礎

一、移動web開發(fā)基礎

1、瀏覽器現(xiàn)狀

移動端的瀏覽器內(nèi)核大多都是基于webkit開發(fā)而來，所以在處理移動端webH5和css3開發(fā)兼容問題時，一般只要處理主流瀏覽器和webkit內(nèi)核兼容就ok了 。

2、手機屏幕現(xiàn)狀

3、常見移動端屏幕尺寸

4、移動端調(diào)試方法

- 搭建本地web服務器，手機和服務器一個局域網(wǎng)內(nèi)，通過手機訪問服務器；
- 使用外網(wǎng)服務器，直接IP或域名訪問。

二、視口

視口(viewport)就是瀏覽器顯示頁面內(nèi)容的屏幕區(qū)域。視口可以分為布局視口、視覺視口和理想視口。

最早是由蘋果公司在推出iPhone手機時發(fā)明的，其目的是為了讓iPhone的小屏幕盡可能完整顯示整個網(wǎng)頁。通過設置視口，不管網(wǎng)頁原始的分辨率尺寸有多大，都能將其縮小顯示在手機瀏覽器上，這樣保證網(wǎng)頁在手機上看起來更像在桌面瀏覽器中的樣子。在蘋果公司引入視口的概念后，大多數(shù)的移動開發(fā)者也都認同了這個做法。

布局視口是指網(wǎng)頁的寬度，一般移動端瀏覽器都默認設置了布局視口的寬度。根據(jù)設備的不同，布局視口的默認寬度有可能是768px、980px或1024px等，這個寬度并不適合在手機屏幕中展示。移動端瀏覽器之所以采用這樣的默認設置，是為了解決早期的PC端頁面在手機上顯示的問題。

iOS, Android基本都將這個視口分辨率設置為980px，所以PC上的網(wǎng)頁大多都能在手機上呈現(xiàn)，只不過元素看上去很小，一般默認可以通過手動縮放網(wǎng)頁。

視覺視口是指用戶正在看到的網(wǎng)站的區(qū)域，等同于移動設備的瀏覽器窗口的寬度

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

1、設備像素/物理像素(device pixel):

物理像素即設備像素，是物理概念，指的是實實在在的用來構成顯示圖片等網(wǎng)絡資源的設備屏幕的電子小晶格，稱作“物理像素點”，即由物理材料做成的實實在在的事物。比如iPhone 6/7/8的分辨率750 x 1334，那么水平方向上有750個電子小晶格，豎直方向上有1334個電子小晶格。

2、物理像素比：dpr=物理像素/邏輯像素

四、2倍圖

實現(xiàn)原理：如移動端要用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>

五、移動端開發(fā)方案選擇

1、主流開發(fā)方案

①（移動端）獨立界面開發(fā) ——推薦指數(shù)：★★★★★

移動端和PC端是不同的代碼；通常域名帶有m（即mobile）字母前綴；適用于大型網(wǎng)站開發(fā)，可以減少兼容性處理成本。

②響應式兼容開發(fā) ——非強制，不推薦

移動端和PC端公用一套代碼。（原理）捕捉不同屏幕寬度，在不同屏幕寬度下，呈現(xiàn)不同的顯示樣式，實現(xiàn)PC端和移動端的兼容顯示；（問題）開發(fā)者需要花費大量精力處理兼容問題。

六、（移動端開發(fā)）常見技術問題解決方案

1、瀏覽器兼容

2、CSS初始化 normalize.css

不同于PC端開發(fā)的reset.css清楚瀏覽器默認樣式，normalize.css是統(tǒng)一一套移動端開發(fā)的初始化樣式。

3、盒模型選擇

①傳統(tǒng)-外擴-content盒模型（推薦：響應式兼容開發(fā)）

width = content

②CSS3-內(nèi)縮-border盒模型（推薦：移動端）

width= border + padding + content

4、特殊樣式處理

七、移動端開發(fā)技術選型

Mission2：流式布局-京東項目

一、流式布局原理

又名“百分比布局”或“非固定像素布局”，即將盒子的寬度設置為百分比寬度，根據(jù)設備屏幕的寬度或者父級盒子寬度自動伸縮的布局方式。是常見移動端web開發(fā)方式。

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

二、京東-移動端首頁制作（準備階段）

1.技術選型

①開發(fā)方案：獨立界面開發(fā)

②布局技術：流式布局

2、項目文件結構搭建

3、基本信息配置

4、CSS分層管理

5、特殊樣式處理

三、京東-移動端首頁制作（正式開發(fā)）

1、Tips頂部提示區(qū)制作

<!-- 頂部tips 區(qū)域開始 --> <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 區(qū)域結束 -->


/* <!-- 頂部tips 區(qū)域 --> *//* 父級容器 */.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區(qū)域制作

html

<!-- 頂部search區(qū)域 開始 --> <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區(qū)域 結束 -->css

/* <!-- 頂部search區(qū)域 開始 --> */.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輪播區(qū)域制作

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布局-攜程網(wǎng)項目

一、flex布局體驗

1、傳統(tǒng)布局vs flex布局

二、flex布局原理

三、flex布局常用屬性

1、父級容器（flex-container）常用屬性

2、子級內(nèi)容（flex-item）常用屬性

四、flex案例——攜程網(wǎng)首頁

1.技術選型

①開發(fā)方案：獨立界面開發(fā)

②布局技術：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字號，調(diào)整縮放整個界面

less常見問題：

less 運算除法失效解決

【正式項目】

1.技術選型

2.搭建項目文件結構

3.配置移動端理想視口和移動端樣式初始化

4.設置公共common.less文件

5.index.less文件

6.body樣式

7.top-banner區(qū)域

8.header區(qū)域

9.banner區(qū)域

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區(qū)域

11.技術方案2——flexible.js實現(xiàn)蘇寧移動端界面

作用：實時根據(jù)屏幕寬度，調(diào)整界面元素的尺寸

原理：通過js瀏覽器器對象，讀取視口寬度數(shù)據(jù)，并設置HTML字體大小

我的思考：事實上我們自己就可以編寫這么一個函數(shù)，監(jiān)聽瀏覽器屏幕寬度變和大小數(shù)據(jù)，實時設置HTML字體大小。不一定要用它這個。（學過js的完全可以自己寫，不一定要用它這個）

①技術選型

②項目文件結構

③理想視口配置和js引入

④開發(fā)便捷工具 cssrem VScode插件

根據(jù)設置圖調(diào)整單位轉(zhuǎn)換的參考根尺寸的px步驟：文件>首選項>設置>拓展>cssrem configuration>root font size

Mission5：響應式布局——阿里百秀項目

本章核心技術

一、導讀

移動端開發(fā)的兩種技術選型

①獨立開發(fā)

②響應式兼容開發(fā)（同時適配PC端和移動端）

二、響應式開發(fā)原理和制作方法

原理：通過媒體查詢，針對不同屏幕寬度給出不同的布局和樣式，適配不同屏幕尺寸設備

三、響應式布局容器

目的是根據(jù)不同的屏幕寬度，設置最佳的用戶體驗布局。（主要是版心）

四、bootstrap框架

1.簡介

2.使用方法

①創(chuàng)建文件結構

②創(chuàng)建HTML骨架結構

③引入bootstrap.css樣式

④調(diào)用bootstrap預設樣式

方法：其實就是調(diào)用寫好的類名，就可以用樣式了。

3.布局容器

4.柵格系統(tǒng)

五、阿里百秀項目

1.技術選型

2.屏幕劃分分析

3.搭建文件結構和配置初始html

<!-- 規(guī)定IE瀏覽器使用最新內(nèi)核渲染 --> <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區(qū)域

六、移動端開發(fā)-總結

【模塊直播】

一、總復習

二、圖片格式

三、img標簽底部空白

1、將圖片轉(zhuǎn)換為塊級對象可去掉下邊空白

　　即設置img為：display:block;

2、設置圖片的垂直對齊方式

　　即設置圖片的vertical-align屬性為“top，text-top，bottom，text-bottom”也可以去掉下邊空白。

　　3、設置父對象的文字大小為0px

　　即在父對象中添加一行：font-size:0;可以解決空白問題，但這也引發(fā)了新的問題，在父對象中的文字都無法顯示，就算文字部分被子對象括起來，設置子對象文字大小依然可以顯示，但在CSS效驗的時候會提示文字過小的錯誤。

　　4、設置圖片的浮動屬性也可去掉空白

　　即設置img元素float，如果要實現(xiàn)圖文混排，這種方法是很好的選擇。

　　5、設置父對象行高為0

　　top 和 bottom 之間的值即為 line-height。假如把 line-height 設置為0，那么 baseline 與 bottom 之間的距離也變?yōu)?，那道空白也就不見了

　　6、改變父對象的屬性

　　如果父對象的寬、高固定，圖片大小隨父對象而定，那么可以設置：overflow:hidden;來去掉空白

四、link標簽書寫位置

五、陰影和圖形繪制

適合繪制由單一元素拼合而成的圖形