天天看點
傳回

01_移動端基礎

基本概念：

螢幕尺寸：

螢幕對角線長度（英寸） 1英寸=2.54cm

螢幕分辨率：

橫縱向上像素點數（實體像素）

螢幕密度：

每英寸上實體像素個數

高清屏：
  • 一種具備超高像素密度的液晶屏；
  • 同樣大小螢幕上顯示實體像素點數由一個變為多個，
  • 高清屏和普通屏相比，相同區域的實體像素點，高清屏是普通屏的4倍
視口尺寸：

代表橫縱向上css像素個數

4個像素 3個視口 2個操作 1個比例

4個像素： 
實體像素：
	(螢幕分辨率)裝置成像最小機關，橫縱向上像素點數
	 一個實體像素占據的實際螢幕尺寸，在不同裝置上是不一樣的。

css像素：
	浏覽器的最小機關，抽象機關（css像素->實體像素）
	 一個css像素最終會轉換成實體像素在螢幕成像。

	一個css像素到底占多少個實體像素，和誰有關？
	    螢幕特性 使用者縮放行為
	    * 不考慮使用者縮放：
	    	沒有viewport：
	    		這塊螢幕橫向上占據多少個實體像素
	    		這塊螢幕橫向上占據多少個css像素
	    	有viewport：
	    		像素比=一個方向上占據一塊螢幕所需要的實體像素的個數 /
	    		一個方向上占據一塊螢幕所需要的css像素的個數
	    * 考慮使用者縮放：
	    	放大：1個css像素占據更多的實體像素
	    	縮小：1個css像素占據更少的實體像素

裝置獨立像素：（也稱密度無關像素）
	可認為計算機坐标系中的一個點，
	這個點代表一個可以由程式使用的虛拟像素，然後由相關系統轉換為實體像素。
	裝置對接css像素接口，一旦css像素與裝置獨立像素挂上鈎（width=device-width）,
	此時像素比才能發揮作用。

位圖像素：
	圖像的最小機關
	位圖像素與實體像素1：1時，螢幕才能清晰展示圖像
3個視口 
布局視口：
	（layout viewport）決定頁面布局
	可以通過document.documentElement.clientWidth來擷取

視覺視口：
	（visual viewport）決定使用者能看到什麼
	 一個css像素占據多少個實體像素和視覺視口有極大的關系
	 一個視覺視口包含的實體像素個數是确定的（分辨率）
	一個視覺視口包含的css像素個數是不确定的，和使用者縮放行為有關
	視覺視口的寬度可以通過window.innerWidth 來擷取，
	但在Android 2, Oprea mini 和 UC 8中無法正确擷取。

理想視口：
	裝置獨立像素所代表的值（加meta标簽之後）；
	隻有是專門為移動裝置開發的網站，才有理想視口這一說。
	而且隻有當在頁面中加入viewport的meta标簽，理想視口才會生效。
    <meta name="viewport" content="width=device-width" />
	這一行代碼告訴我們，布局視口的寬度應該與理想視口的寬度一緻
2個操作(放大和縮小) 
使用者的：隻影響視覺視口
系統的：影響視覺視口和布局視口

放大：
    放大一個css像素的面積，視覺視口尺寸變小，
    一個css像素包含的實體像素個數變多
縮小：
    縮小一個css像素的面積，視覺視口尺寸變大，
    一個css像素包含的實體像素個數變少
1個比例(像素比) 
像素比：
    （DPR）(devicePixelRatio)     
    實體像素/裝置獨立像素
    可通過window.devicePixelRatio擷取（相容性問題嚴重）
    
    像素比 = 
        一個方向上占據一塊螢幕所需要的實體像素的個數 /
		一個方向上占據一塊螢幕所需要的裝置獨立像素的個數 ;
		
當寫上<meta width='device-width'>時，
    css像素與裝置獨立像素連接配接起來。
即:
    像素比 = 一個方向上占據一塊螢幕所需要的實體像素的個數 /
             一個方向上占據一塊螢幕所需要的css像素的個數

3個意外 

1.太大的元素
	使用完美視口解決太大的元素超過視覺視口後不出滾動條的問題
	完美視口：width=device-width initial-scale=1.0
2.width=device-width和initial-scale的沖突，誰大聽誰的
3.等比問題：
	沒有加name為viewport的meta标簽
		一個相同css像素大小的區域在不同的裝置是等比的,（像素比）
		在不同的裝置上占據的實際實體大小（英寸）不一樣
		頁面展示太小，使用者體驗不好
	加name為viewport的meta标簽
		一個相同css像素大小的區域在不同的裝置是不等比的,
		在不同的裝置上占據的實際實體大小（英寸）是一樣的
	等比是不是一個必須的需要？
	    百分百還原設計圖 
	        ---> 在不同裝置上要等比（文字要完美清晰的展示）
			 ----> 必須加meta标簽（不等比）
				 ---> 适配！！！！（加上meta标簽後也得等比）

了解

css像素能不能代表一個裝置的大小？如果能代表，這個值确不确定? 
能 不确定
螢幕大小之間的比較應該使用絕對機關:螢幕尺寸（對角線長度）
實體像素與css像素比例的維護是誰在維護？維護規則是什麼？ 
視覺視口(1.決定使用者能看到什麼；2.包住整個布局視口)

實體像素:螢幕的分辨率
css像素: 布局視口尺寸

加name為viewport的meta标簽
像素比
沒有加name為viewport的meta标簽
布局視口尺寸 / 螢幕的分辨率
四個像素之間的關系 
裝置獨立像素
實體/裝置像素
css像素
位圖像素

* 實體像素和裝置獨立像素:
    像素比: 一個方向上占據一塊螢幕所需要的實體像素的個數 /
            一個方向上占據一塊螢幕所需要的裝置獨立像素的個數  =2;
* 實體像素和位圖像素:1:1的時候才能完美清晰的展示
* 實體像素和css像素
    普通屏:1比1
    高清屏:

加name為viewport的meta标簽
    像素比

沒有加name為viewport的meta标簽
    布局視口尺寸 / 螢幕的分辨率
    
* css像素和裝置獨立像素
    沒有加name為viewport的meta标簽:沒有關系
    加name為viewport的meta标簽:可以認為css像素就是裝置獨立像素
* 注意@2x 和 @3x圖的使用
像素比 到底是什麼 
* 像素比: 一個方向上占據一塊螢幕所需要的實體像素的個數 /
        一個方向上占據一塊螢幕所需要的裝置獨立像素的個數 ;
* 當寫上<meta width='device-width'>時，
  css像素與裝置獨立像素連接配接起來。即
    像素比=一個方向上占據一塊螢幕所需要的實體像素的個數 /
           一個方向上占據一塊螢幕所需要的css像素的個數
理想視口什麼時候出現？ 像素比什麼時候有用？ 
加name為viewport的meta标簽
理想視口與裝置之間的關系 
理想視口的尺寸：裝置獨立像素所代表的值
不同浏覽器在同一裝置上理想視口的尺寸可能會不一樣
一款浏覽器在不同裝置上理想視口的尺寸可能會不一樣
思考視口的主線 
本質上三個視口的實體尺寸就是螢幕尺寸
在不一樣的情況下，各個視口所包含的css像素的個數是不一樣的
布局視口包含的css像素的個數
980 1024 （浏覽器不一樣）
視覺視口包含的css像素的個數
預設情況（css像素和實體像素1:1）---> 螢幕的分辨率
移動端浏覽器初始化的時候（視覺視口必須要包住布局視口）  
---> 布局視口包含的css像素的個數就是視覺視口所包含的
使用者縮放（隻影響視覺視口）
放大---> 視覺視口包含的css像素的個數變少
縮小---> 視覺視口包含的css像素的個數變多
理想視口包含的css像素的個數
裝置獨立像素所代表的值
縮放 
* pc端的縮放:會改變元素的布局（布局視口）
* 移動端（縮放隻改變視覺視口内css像素的個數）
* 放大
    使css像素變大，一個css像素所包含的實體像素的個數變多，元素變的更大
    視覺視口内，css像素的個數變少
* 縮小
    使css像素變小，一個css像素所包含的實體像素的個數變少，元素變的更小
    視覺視口内，css像素的個數變多
怎麼擷取三個視口的值 
* 布局視口：(基本沒有相容性問題)
    document.documentElement.clientWidth
* 視覺視口：（有一點相容性問題）
    window.innerWidth
* 理想視口：（相容性問題極大）
    screen.width
完美視口以及meta标簽 
過大的元素--->完美視口
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
哪些操作會影響布局視口 
width=device-width
initial-scale
重力感應（橫豎屏切換）
等比問題 
沒有加name為viewport的meta标簽
一個相同css像素大小的區域在不同的裝置是等比的,
在不同的裝置上占據的實際實體大小（英寸）不一樣
加name為viewport的meta标簽
一個相同css像素大小的區域在不同的裝置是不等比的,
在不同的裝置上占據的實際實體大小（英寸）是一樣的
等比是不是一個必須的需要？
百分百還原設計圖 ---> 在不同裝置上要等比（文字要完美清晰的展示）
----> 必須加meta标簽（不等比）
---> 适配！！！！（加上meta标簽後也得等比）
meta标簽 
<meta name="viewport" content="width=device-width,initial-scale=1.0,
    minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
移動端
上一篇: Django邊學邊記—靜态檔案
下一篇: iphone圖檔拉伸相關

繼續閱讀