H5 移動端 響應式佈局開發 Hybrid 混合開發

時間  2019-11-05
標籤 h5 移動 響應 佈局 開發 hybrid 混合 欄目 無線 简体版
原文   原文鏈接

前言

文章涉及的內容可能不全面，但量不少，須要慢慢看。我花了很長的時間整理，用心分享心得，但願對你們有所幫助。可是不免會有打字的錯誤或理解的錯誤點，但願發現的能夠郵箱告訴我1163675970@qq.com，我會及時的進行修改，只但願對你有所幫助，謝謝。 H5 移動端 響應式佈局開發 Hybrid 混合開發javascript

H5 ---> HTML 5 那麼什麼是 html 5 就是 HTML 第 5 版本php

HTML ：超文本標記語言css

XHTML： 更加嚴謹的 HTMLhtml

HTML5： 新一代 HTML規範（適配移動端設備） 文檔聲明--> <!DOCTYPE html>前端

首先推薦幾個學習H5 的好的學習網站推薦 及 書籍html5

咱們來看下 HTML 5 都帶來哪些新增的方法特性和 API （概述）java

  • HTML / XHTML / HTML5
  • 新增的語義化元素
    • 用於構建頁面的語義元素
    • 用來標識文本的語義元素
  • 調整、刪除的元素
    • 刪除：big / center / font
    • 調整：small / hr
  • web表單及交互
    • 新增不少的類型
    • 表單驗證的幾種方式
    • 文本框內容提示
    • datalist
    • ......
  • audio / video 音視頻
  • canvas
  • HTML5 API
    • Web Storage 和 本地數據庫
    • Web Workers
    • File API
    • History API
    • ......

真正的學習 HTML5 並非 學習那些標籤，而是學習它的各類API,他提供了大量的關於操做 JS 的API , 包括 audio / video canvas 都是要基於 JS 來實現node

HTML 5 不只僅是 只是提供了一些標籤，它裏面還提供了大量的方法 PAI ，供咱們來操做不少功能

咱們首先來看一下第一部分 先增長的 調整、刪除的 語義化標籤 以及表單源元素 的 增容react

何爲 標籤語義化 ？-> 合理的標籤作合適的事情android

爲啥要標籤語義化 ? -> 有利於SEO搜索引擎優化推廣 SEO：搜索引擎關鍵詞排名推廣 SEM：百度競價

seo

TDK：有利於 SEO

TDK是什麼

TDK實際上是英文單詞title description keywords 的縮寫，是三個定義標籤，中文譯爲： 標題、 描述、 關鍵詞。

很明顯，標題（title）就是用來寫一句和網站運營內容的標題，告知搜索引擎咱們的網站是作什麼的，叫什麼名字。

描述（description）是用來寫一段簡短的話，簡單概述一下網站是作什麼的，讓用來能夠清晰明瞭的對網站運營內容有個大概的判斷。

關鍵詞（keywords）是用來定義網站主要優化的核心關鍵詞，這個標籤的關鍵詞頁面是不會顯示的，它是隱藏在源代碼當中，目的是告訴搜索引擎蜘蛛這個網站全部運營的內容都將會是和這些關鍵詞相關。

那麼，在哪裏能夠設置TDK標籤呢？

TDK標籤做爲頁面最重要的標籤，天然是要出如今頁面的頭部的，並且也只能出如今頭部，即代碼...之間。你們都知道蜘蛛的爬行習慣是從上到下，從左到右的爬行抓取的，因此頭部的位置也是一個頁面當中最重要的位置，權重天然是也是最高的。說岔了，仍是說說tdk怎麼寫吧。

下面附上一段代碼，你們能夠學習一下。以珠峯網站爲例：

<title>珠峯培訓-十年專一前端培訓，有口皆碑的前端培訓機構</title>

<meta name="keywords" content="IT學習,前端培訓,前端開發培訓,web前端培訓,javascript培訓,JS培訓,HTML5培訓,CSS3培訓,移動端培訓,Node培訓,react培訓,Vue培訓,ReactNative培訓,北京前端培訓,北京JavaScript培訓,北京Node培訓,北京HTML5培訓,北京react培訓,北京Vue培訓,珠峯培訓 ">

<meta name="description" content="珠峯培訓_中國前端開發培訓知名品牌，十年專一web前端培訓，以專一立身，學習考試經過後再交學費，四周內無條件退學費；70%學員來自口碑推薦，強大的師資團隊，最深刻的課程體系，以學生爲信仰的教學理念。咱們專一的特點web培訓有：HTML5培訓,node.JS培訓,前端開發培訓,前端培訓,移動端培訓,react培訓,Vue培訓,webpack培訓,ReactNative培訓,前端架構師培訓" />


複製代碼

tdk

上面是引起的一個知識點 咱們繼續咱們的主題

  1. 新增的語義化標籤 -> 經常使用的

    在兼容的狀況下 是【塊級標籤】

    1. header 頭部區域
    2. main 主體
    3. footer 尾部
    4. article 文章
    5. nav 導航
    6. figure 配圖
    7. figcaption 配圖說明
    8. aside 與主體內容無關（通常應用於側邊欄）
    9. section 普通區域

    【行內標籤】 mark 文本標記 time 日期標記 ......

    1. 調整、刪除的元素

    ​ 刪除：big / center / font -> 這些標籤 你用不報錯 可是不符合規範

    ​ 調整：small / hr

    ​ small --> 此標籤 原意 爲 縮小文本，可是在h5 中語義化爲 附屬 細則

    ​ strong --> 此標籤 原意爲 文本加粗 ，可是在h5 中語義化爲 重點朗讀 聲明

    ​ hr --> 此標籤 原意爲 樣式裏有一條線 ，可是在h5 中語義化爲 分割區域

    刪除 ---> 刪除不是說完全刪了，你用就報錯，而是不推薦你使用

    調整 --> 調整在原有的基礎上，修改成最新的意思

    HTML 5 存在兼容性問題

    處理兼容（IE6~8）只須要導入一個JS：html5.min.js

    3.web表單及交互

    • 傳統的表單元素 form 先後端不分離項目中的表單提交
    <form action="/adduser. php">
< input type="submit" value="提 交"> </form>
複製代碼

    ​ input： text/radio/checkbox/button/submit/reset/hidden/file... ​ textarea ​ select 下拉框

    <select name=""id="">
<option value=""> 北京 </option>
<option value=""> 上海 </option>
</select>

複製代碼

    • HTML5中新增表單元素或者input中新增的類型 input：

    • search -> 搜索框

    • email -> 郵件框

    • tel ->電話框

    • number->數字框

    • date->日曆框

    • time->日期框

    • color->色板框

    • range->滑動杆

    • ...

      1)功能強大

      2)在移動端能調取出對應的鍵盤，方便用戶輸入

      3)內置表單輸入內容格式的驗證

    <div class="formBox">
		<input type="email" id="emailInp" placeholder="請輸入郵箱地址">
		<p id="emailTip">輸入的郵箱格式不正確~~</p>
	</div>
<script>  --js驗證
// HTML5新表單類型自帶驗證方式
  checkValidity() 

 emailInp.onkeydown = emailInp.onkeyup = function () {
   if (!this.checkValidity()) {
      emailTip.style.opacity = 1;
      return;
   }
   emailTip.style.opacity = 0;
} 
</script>

-> css驗證 
<style>
		.formBox input:invalid+p {
			opacity: 1;
		}

		.formBox input:valid+p {
			opacity: 0;
		}
</style>
<div class="formBox">
		<input type="email" id="emailInp" placeholder="請輸入郵箱地址">
		<p id="emailTip">輸入的郵箱格式不正確~~</p>
	</div>
複製代碼

    • CSS3中的重點知識

      推薦書籍：圖解CSS3

      • @font-face

      • CSS3選擇器

      • 經常使用樣式屬性：文字和邊框的處理

    • 背景的處理

    • 漸變色背景

（1）從上到下漸變：

```background: linear-gradient(red, blue); 複製代碼

（2）從左到右漸變：

``` background: linear-gradient(to right, red , blue); 複製代碼

（3）對角（從左上角到右下角）漸變：

```   background: linear-gradient(to bottom right, red , blue);
複製代碼

www.jianshu.com/p/133d7609e…

    • 背景圖片處理

    background-size 屬性規定背景圖片的尺寸

background-origin 屬性規定背景圖片的定位區背景圖片能夠放置於 content-box、padding-box 或 border-box 區域。

    • filter (濾鏡)

    drop-shadow 給圖像設置一個陰影效果:

    Grayscale 將圖像轉換爲灰度圖像:

    Opacity 轉化圖像的透明程度

    www.runoob.com/cssref/css3…>

    • 變形和動畫

      • transform

      • transition

      • animation

      • 3D變形動畫

    • 盒子模型

      • box-sizing

      • column

      • flex box

    • 媒體適配和響應式佈局開發

    • 兼容處理 和 prefixfree.min.js

    • 兼容處理 和 prefixfree.min.js

    咱們重點看一下 媒體適配和響應式佈局開發

    響應式佈局開發設計

    • 響應式佈局開發概述

    • Hybrid混合APP開發

    • 響應式佈局開發技巧

      • viewport

      • dpi適配

      • @media

      • rem

      • ......

CSS預編譯語言：less

lesscss.cn/

  • LESS概要
    • 什麼是LESS
    • LESS的做用

less 是一門 CSS預編譯語言 ， 和其相似的預編譯器還有：sass、stylus等；而所謂的預編譯，實際上是把css這種標記語言，按照面向對象（編程語言）的方式進行編寫（有變量、函數、判斷等操做），可是這種寫法瀏覽器不能直接的識別，須要咱們把其再編譯爲正常的css代碼才能夠； 與此同時，使 CSS 更易維護和擴展

Less 能夠運行在 Node 或 瀏覽器端。

  • 編譯LESS
LESS的編譯經常使用的分爲兩種
1.開發環境下（開發項目的時候）
咱們基於less-2.5.3.min.js進行編譯：基於link把less文件導入，可是rel的值必須是stylesheet/less，這樣導入的JS會找到這些less文件，把less編譯爲css便可
<link rel="stylesheet/less" href="css/index.less">
index.less 中文件格式
/* 咱們基於@import最好導入的是LESS文件（只有這樣最後才能編譯到一塊兒；設置reference是隻導入進來調取使用，編譯的時候不進行編譯； */
@import './reset.less';
@import (reference) './common.less';

'./common.less' -> 咱們調用此文件是爲了使用其中方法，最終要的是方法執行後的 返回值給咱們 


2.生產環境下（項目部署上線的時候）
咱們須要把less編譯爲css，而後讓頁面中導入的都是編譯後的css
須要基於node環境，而且基於less模塊進行編譯（命令操做方式）
  - 安裝NODE(安裝NPM)
  - $ npm install less -g  （MAC電腦上最好設置sudo安裝）
  - 找到對應的less文件目錄，在目錄中：$ lessc xxx.less xxx.css / -x （設置-x是爲了把代碼進行壓縮）
複製代碼
  • LESS中的變量

變量 就是存儲值和表明值 和 js 中同做用

  • Mixin混合

    • 基本使用
    • extend繼承

    繼承

    1.基於繼承也能實現樣式的公用（原理：兩個樣式類公用同一套代碼，可是後代樣式不能被繼承）

    .box1 {
	@A1: lightgreen;
	@W: 200;
	@H: 200px;

	.func_center(@W, unit(@H, px));

	box-sizing: border-box;
	width: unit(@W, px);
	height: @H;
	border: 5px solid @A1;
     
//-> .box1 img
	img {
		//@W-20這樣被理解爲是一個變量名（變量名能夠包含-）
		width: unit((@W)-20, px);
		height: unit(unit(@H, px)-20, px);
	}

 .box2 {
 	&:extend(.box1); 
 }

.box2:extend(.box1) {}  
->  後代IMG 樣式不能被繼承 ,只能繼承到 box1 的   
複製代碼
    • 命名空間和做用域

    每個大括號都是一個私有的做用域，在裏面用到的變量，先看是否爲私有的（是否在當前做用域中聲明過和形參變量），不是私有的，找上級做用域中的 =>"相似於JS做用域鏈這套機制"

    • !important
    • Parametric Mixins 帶參數的函數

    函數

1.每個樣式類都能被充當一個函數，直接在其它的做用域中調取執行（執行特色：不須要傳參，能夠不加小括號） =>這種函數的調用是把原有的代碼都原封不動的拿過來一份如出一轍的（包括其全部的後代樣式）

2.帶參數的函數（建立函數帶着小括號），也是直接點的方式調用，可是編譯成爲css的時候，函數不會編譯，可是函數執行出來的代碼會放到每個調取函數的選擇器中

.func_center(@W: 100, @H: 100) {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: unit(-@H/2, px) 0 0 unit(-@W/2, px);
}

.func_transition(@property: all, @duration: .5s, @timing: linear, @delay: 0s) {
	// transition: @property @duration @timing @delay;
	transition: @arguments;
}

img {
	.func_transition;
	.func_transition(@duration: 1s);
	.func_transition(opacity, .3s, ease, 0s);
}

複製代碼
    • Mixin Guards 設置條件
  • Parent Selectors 當前選擇器和父選擇器鏈接符&

&嵌套中的鏈接符,讓後面的選擇器緊挨着父選擇器 .box1>img

​ &>img { ​ transform: skew(45deg); ​ }

  • Loops 遞歸調用
.loop(@n) when (@n<=4) {
	.loop(@n+1);

	.column-@{n} {
		width: unit(@n*10, %);
	}
}

.loop(1);
複製代碼

  • less中的內置函數

    • unit 單位處理
    //-> unit：less中內置的函數，用來設置或者去除單位的
.box1 {
	@A1: lightgreen;
	@W: 200;
	@H: 200px;

	.func_center(@W, unit(@H, px));

	box-sizing: border-box;
	width: unit(@W, px);
	height: @H;
	border: 5px solid @A1;

	//.box1 img
	img {
		//@W-20這樣被理解爲是一個變量名（變量名能夠包含-）
		width: unit((@W)-20, px);
		height: unit(unit(@H, px)-20, px);
	}
複製代碼
    • darken - 下降 / lighten --> 增長

修改元素中顏色的亮度。 它有如下參數：

  • color ：它表明顏色對象。
  • amount ：它包含0 - 100%之間的百分比。
  • 方法：它是可選參數，經過將其設置爲相對，用於相對於當前值進行調整。

響應式佈局開發：讓H5頁面適配不一樣的設備

項目類型：
 1.PC端產品（通常用於大型項目，大型項目都是PC和移動端各作一套產品）
			  =>通常不須要作響應式開發，都是固定寬高的佈局（100%還原設計稿）
			  =>有時候全屏的項目，須要咱們把最外層容器的寬度設置爲百分比佈局

	2.移動端產品（不須要PC訪問處理）
	=>webApp：把開發的H5頁面放到手機端瀏覽器、微信、本身公司的APP中運行 「Hybrid混合APP開發」 
	=>小程序
	 =>APP：IOS、ANDROID、前端（react native、flutter、uni-app、ionic、phoneGap、cordova...）

	=>須要作響應式佈局開發，可是隻須要適配移動端設備便可
	  手機尺寸(px)：320、37五、41四、360、480、540...
			  PAD尺寸：768*1024
			
	3.PC端和移動端用同一套項目
	=>須要響應式佈局處理
	=>這種產品通常都是簡單的企業展現站  例如：        https://www.huawei.com/cn/
	=>技術棧：@media

	響應式佈局開發 「敢於探索，勇於嘗試 =>多思考」
	   1. 媒體適配 @media
	   2. 羣魔亂舞時代
		 =>固定佈局
		 <meta name="viewport" content="width=320px...">
		 =>等比縮放佈局
		 按照固定的樣式寫一版（例如：320），而後根據設備的寬度，讓其除以320，計算出縮放的比例，最後讓整個HTML基於 transform:scale(比例) 進行縮放
	  3. rem響應式佈局開發（等比縮放）
複製代碼

響應式佈局開發的基礎

咱們把HTML5頁面放到手機上預覽，默認狀況下，無論手機設備有多寬，HTML都是按照980(或者1024)寬度渲染的，這樣頁面會總體縮小（內容也都會縮小）

解決：viewport視口（layout viewport 佈局視口），設定頁面渲染中的一些規則
width=device-width：讓當前頁面渲染的寬度和設備寬度保持一致
initial-scale=1.0：初始縮放比例1:1
maximum-scale=1.0：最大縮放比例1:1
minimum-scale=1.0：最小縮放比例1:1
user-scalable=no: 禁止用戶手動縮放
       
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">


複製代碼

vp

??? 什麼是rem 它的佈局原理是什麼

rem（font size of the root element）：是指相對於根元素的字體大小的單位，其佈局的本質是等比縮放，通常是基於寬度。

將設計稿轉化爲手機屏幕上的內容，就相似於畫地圖，按照必定的比例進行縮小繪製

rem

REM響應式佈局開發

第一步：拿到設計稿後（如今設計稿通常是750PX的），咱們設定一個初始的REM和PX的換算比例（通常設置爲1REM=100PX，爲了方便後期換算）

第二步：測量出設計稿中元素的尺寸（PS測出來的是PX單位），在編寫樣式的時候所有轉換爲REM的單位（除以100便可） =>100%還原設計稿

第三步：編寫一段JS，獲取當前設備的寬度，讓其除以設計稿的寬度750，再乘以初始的換算比例100，計算出當前設備下，1REM應該等於多少像素（只要改變HTML的FONT-SIZE就能夠）；這樣HTML字體大小一改，以前全部以REM爲單位的元素都會跟着自動縮放......

如今真實項目中，主體響應式佈局以REM爲主，部分效果實現能夠基於FLEX來作，須要樣式微調增仍是要基於@media來完成的...


 DPR適配：屏幕像素密度比 

複製代碼

瞭解單位區別

CSS經常使用的單位：
   px 像素（固定單位）
   
   em 相對單位，相對於父元素的字體大小設定的單位
   
   rem （root em）相對於當前頁面根元素（HTML）的字體大小設定的
   
   %
   
   deg
   
   s / ms
  .................
複製代碼

px

app 發展史 和 Hybrid 混合開發

原生 app

Native App : IOS和ANDROID ios:object-c / swift android:java-native

優勢

直接運行在操做系統中(可以直接操做設備中的軟件或者硬件,並且性能不錯)

缺點

不能跨平臺內容不能及時更新或者讓用戶及時的看到

webApp

webApp : H5頁面 => H5 + CSS3 + JAVASCRIPT

優勢

跨平臺開發(手機端的瀏覽器般都是webkit內核的)、強制自動更新的，把內容及時傳達給用戶

缺點

H5運行在手機的瀏覽器中，而不是操做系統中(操做手機軟硬件功能須要瀏覽器的支持,並且性能也很差)

Hybrid混合APP開發

Hybrid混合APP開發: =>把webApp嵌入到Native App的webview中

開發一款 珠峯課堂 APP 它的殼子是由原生來作的

把操做軟硬件和一些須要高體驗或者支付分享等功能交給native app開發

在 webview 中 嵌入 H5 頁面

webview就是不叫瀏覽器的瀏覽器，它也是基於 webkit內核渲染頁面的

前端開發者把網址給APP開發者,他們會把其嵌入到webview中

例如

webview中有一個自拍功能，

在使用此功能時，它會向app 發送請求

調取使用手機攝像頭

當 App接收到請求會調取攝像頭進行拍照,拍照後把保存在相冊中的照片地址給H5返回

此時就涉及到了 Hybrid 的重點 H5 和 app 的通訊

JSBridge

JSBridge原理:向webview中注入全部須要H5後 期調取APP的方法(相似於window的全局對象)

僞協議傳輸

===>只用於IOS ,由於安卓是開源系統，不安全

當拍照的touchstart 事件觸發的時候

window.location.href= "sports://kbs.com/photo?callback= fn" -->

當咱們在H5 頁面發送一window.location.href 跳轉頁面的請求 ，而咱們的 H5 在 APP上運行的當，咱們全部請求 app 均可攔截到 ，當他攔截到 這個請求是 sports:// 這個僞協議時，然而此協議是咱們提早商議好壓根不存在僞協議， 他發現只要是 sports://協議不是要跳轉頁面，而是調用photo 方法 把咱們的函數傳給他 而後幫咱們拍照，而後幫咱們把函數執行，而且把照片給咱們這個函數 那咱們在此函數就能夠拿到照片了

Hybrid

移動端經常使用的類庫或者插件

移動端TOUCH事件處理

  • zepto.js 做爲操做DOM的類庫（PC端用JQ，移動端用ZP）
  • swiper.min.js 做爲滑屏處理插件
  • makisu.min.js 做爲下拉3D菜單的插件
  • jQuery上下滑動加載刷新插件iscroll.js 下面是效果圖
  • www.jq22.com/yanshi6625 ....

移動端事件 ——差點忘了你

移動端手指事件

單手指事件模型 Touch

  1. touchstart 手指按下
  2. touchmove 手指移動
  3. touchend 手指鬆開
  4. touchcancel 操做取消（通常應用於非正常狀態下操做結束）

多手指事件模型Gestrue

  1. gestruestart
  2. gesturechange / gestrueundate
  3. gestureend
  4. gesturecancel

移動端有單獨的觸摸事件，通常不使用click事件，由於在移動端有300ms的延遲；

let box = document.querySelector('#box');
複製代碼
  • touchstart 觸摸元素時觸發
box.addEventListener('touchstart', function (e) {
    console.log('toustart');
    console.log(e); // TouchEvent 觸摸事件對象
    // 在觸摸事件對象中，把觸摸的信息存放在touches中；
    console.log(e.touches[0].clientX);
  });
複製代碼
  • touchmove 在元素上滑動時觸發
box.addEventListener('touchmove', function (e) {
    console.log(e.touches);
  });
複製代碼
  • touchend 當手指離開元素時觸發
box.addEventListener('touchend', function (e) {
    console.log('touchend');
    console.log(e.changedTouches); // touchend沒有e.touches ，事件信息放到了e.changedTouches屬性上
  })
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程