什麼是適配？頁面在不同裝置上等比展示
適配的目的：百分百還原設計圖
rem適配的原理：改變了乙個元素在不同裝置上佔據的css畫素的個數
mate標籤（元資料）是資料的資料資訊
標籤提供了 html 文件的元資料。元資料不會顯示在客戶端，但是會被瀏覽器解析。//寫在head標籤內
viewport是html的父元素
下面語句設定它的尺寸
<meta
name
="viewport"
content
="width=device-width,
initial-scale=1.0,
maximum-scale=1.0
user-scalable=no"
>
//width=device-width 寬度等於裝置寬度
//height=device-height 高度等於裝置高度
//initial-scale 初始縮放比例
//maximum-scale 允許使用者縮放最大比例
//minimum-scale 允許使用者縮放最小比例
//user-scalable 是否允許使用者縮放
chrom開發者工具除錯手機頁面 //瀏覽器相容問題 最終還是要手機看一下
標籤和css有一些相容性問題 **caniuse **查閱
定義：根據解析度不同選擇不同的樣式
主要作用：
用法
//用在style標籤內部@media all // 所有**型別，tv，手機，印表機
and //邏輯操作
(min-width: 200px) and (max-width: 300px)
}
缺點：很多重複的css
寫的網頁執行在手機程式中。本來網頁提供的功能是有限的。
但是應用程式可以給頁面新增函式
在這種情況下，js就可以呼叫別人提供的功能
比如js不能實現手機震動
ios 安卓 可以讓手機震動
ios寫乙個object c 讓手機震動，並且暴露出去
把這個東西註冊為網頁的乙個js函式
js呼叫這個js函式 手機就震動
js函式呼叫object c 讓手機震動
總結：看上去是js讓手機震動，只要把api提供給js
js**就是用別人提供的功能寫邏輯
em相對自身的fontsize 比如瀏覽器fontsize = 16px
<style
>
article
style
>
// current 200*200px
<
style
>
article
style
> // current 160*160px
任何裝置1rem = html 標籤下 fontsize值
rem方案適配
要求：相同元素在不同裝置上的等比展示
rem適配原理：改變乙個元素在不同裝置上佔據的css畫素的個數
優點： 有完美視口//沒有破壞完美視口
缺點： px值到rem的轉換複雜
var stylenode = document.createelement("style")
var w = document.documentelement.clientwidth/16
每乙個元素在不同裝置上佔據的css畫素個數是一樣的。但css畫素和
物理畫素的比例是不一樣，等比的
優點：所量即所得
缺點：沒有使用完美視口
(function
() )()
布局視口：決定網頁的布局，要不要換行，整個視口能放下多大網頁//與裝置沒關係
視覺視口：使用者能看到什麼「決定了物理畫素與css畫素的比例，乙個視覺視口佔據的物理畫素永遠是750，可乙個視覺視口中的css畫素個數與使用者縮放有關」
作用：維護了物理畫素與css畫素的比例。面積上的比例
理想視口：加上meta標籤才有意義 布局視口與視覺視口一樣
meta name=""viewport" content="width=device-width, initail-scale=1.0"
寫乙個是理想視口 兩個都寫是完美視口
完美視口讓我們的布局視口變成理想視口
當有乙個元素超出布局視口，檢視視口，會出現滾動（與視覺視口有關）
width=device-width只改變布局視口（布局視口誰大聽誰的）
initail-scale=1.0兩個都變
物理畫素：就是解析度（物理解析度） 裝置成像的最小單元
裝置獨立畫素：計算機座標系統中得乙個點，這個點代表乙個可以由程式使用並控制的虛擬畫素(比如：css 畫素,只是在android機中css 畫素就不叫」css 畫素」了而是叫」裝置獨立畫素」)，然後由相關系統轉換為物理畫素 也是裝置提供出的乙個介面（對接css畫素）
css畫素：抽象的 web開發中的最小單元
位影象素：的最小單元
畫素比dpr： 物理畫素與裝置的獨立畫素
//由於物理畫素，裝置獨立畫素，畫素比都是裝置的概念與瀏覽器無關，出場就確定了
與瀏覽器無關，在web開發中無意義
meta width = device-width
1個css畫素 = 4個物理畫素 （iphone6）
document.documentelement.clientwidth //layout沒有相容性問題。可見區域寬度，檢視視口。眼睛能看到的
尺寸：便是包含內部css畫素的個數
使用者縮放：移動端布局視口不變 （pc端會變）
系統縮放：布局視口和視覺視口都變（參照理想視口縮放）
npm install vue-meta --s**eimport meta from 'vue-meta'vue.use(meta)
在單個vue頁面中設定meta資訊
export
default
, ]},
data ()
},mounted(),
methods:
}
08 移動端開發教程 移動端適配方案
由於移動端的特殊性，螢幕的尺寸碎片化嚴重，要想很好的適配不同的尺寸的裝置，需要我們前端開發相比pc端要做一些基層的適配方案。百分比 固定高度布局方案 rem解決方案 固定設計稿的寬度開發 根據裝置動態適配縮放 此方案的前提是設定螢幕為理想視口，然後通過水平百分比布局或者彈性布局，垂直方向一般用固定畫...
移動web開發與適配
1.定高，寬度百分比 2.flex布局 3.查詢 media 型別 and 特性 型別 screen print 特性 max width max height demo media screen and max width 320px media screen and min width 321p...
移動端開發
一。響應式設計好處 1.一套專案 2.一套開發環境 3.乙個url 4.內容所見即所得 5.不會因為終端公升級而導致不可用 做法 布局百分比寬度 容器浮動 二。viewport引數的最佳組合 三。mediaquery書寫思路 先寫高解析度樣式。理由 1.設計師設計原型往往首先基於寬屏，甚至不會給出適...