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

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

[TOC]javascript

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

H5 ---> HTML 5 HTML 第 5 版本
HTML ：超文本標記語言
XHTML： 更加嚴謹的 HTML
HTML5： 新一代 HTML規範（適配移動端設備） 文檔聲明--> <!DOCTYPE html>css

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

  • developer.mozilla.org/zh-CN/docs/…
  • HTML5的兼容性檢測： caniuse.com/
  • 在線檢測編寫的代碼是否符合標準 ： validator.w3.org/
  • 推薦書籍：HTML5祕籍第二版

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

  • 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 來實現html

HTML 5 不只僅是 只是提供了一些標籤，它裏面還提供了大量的方法 PAI ，供咱們來操做不少功能
咱們首先來看一下第一部分 先增長的 調整、刪除的 語義化標籤 以及表單源元素前端

  • 什麼是標籤語義化 ？-> 合理的標籤作合適的事情
  • 爲何要標籤語義化 ? -> **有利於SEO搜索引擎優化推廣 (SEO：搜索引擎關鍵詞排名推廣 SEM：百度競價)

TDK：有利於 SEOhtml5

TDK是什麼?java

TDK實際上是英文單詞title description keywords 的縮寫，是三個定義標籤，中文譯爲： 標題、 描述、 關鍵詞。 很明顯，標題（title）就是用來寫一句和網站運營內容的標題，告知搜索引擎咱們的網站是作什麼的，叫什麼名字。 描述（description）是用來寫一段簡短的話，簡單概述一下網站是作什麼的，讓用來能夠清晰明瞭的對網站運營內容有個大概的判斷。 關鍵詞（keywords）是用來定義網站主要優化的核心關鍵詞，這個標籤的關鍵詞頁面是不會顯示的，它是隱藏在源代碼當中，目的是告訴搜索引擎蜘蛛這個網站全部運營的內容都將會是和這些關鍵詞相關。react

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

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

以大麥網爲例

<html>
<head>
    <meta charset="utf-8" />
    <title>大麥網-全球演出賽事官方購票平臺-100%正品、先付先搶、在線選座！</title>
    <meta name="keywords" content="演唱會,音樂會,話劇,體育比賽,兒童親子,動漫,,門票,訂票,購票,演出,先付先搶,在線選座,明星演唱會,在線訂票,大麥網"/>
    <meta name="description" content="大麥網-全球演出賽事官方購票平臺-100%正品，安全快捷，爲您提供演唱會、音樂會、話劇、體育比賽等多種門票在線訂購服務，讓您享受優質的購票體驗！"/>
</head>
複製代碼

一、新增的語義化標籤 -> 經常使用的

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

  • header 頭部區域
  • main 主體
  • footer 尾部
  • article 文章
  • nav 導航
  • figure 配圖
  • figcaption 配圖說明
  • aside 與主體內容無關（通常應用於側邊欄）
  • section 普通區域

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

二、調整、刪除的元素

  • 刪除：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選擇器
  • 經常使用樣式屬性：文字和邊框的處理
  • 背景的處理
    • 漸變色背景
    • 背景圖片處理
  • 濾鏡功能
  • 變形和動畫
    • transform
    • transition
    • animation
    • 3D變形動畫
  • 盒子模型
    • box-sizing
    • column
    • flex box
  • 媒體適配和響應式佈局開發
  • 兼容處理 和 prefixfree.min.js
  • 兼容處理 和 prefixfree.min.js

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

響應式佈局開發設計

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

  • 響應式佈局開發概述

  • Hybrid混合APP開發

  • 響應式佈局開發技巧

    • viewport

    • dpi適配

    • @media

    • rem...

項目類型： 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">
複製代碼

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

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

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

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
複製代碼

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中

開發一款 XX 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 方法 把咱們的函數傳給他 而後幫咱們拍照，而後幫咱們把函數執行，而且把照片給咱們這個函數 那咱們在此函數就能夠拿到照片了

移動端事件

移動端有單獨的觸摸事件，通常不使用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教程