移動端工作準備

2022-08-21 13:15:14 字數 1227 閱讀 6292

一、meta標籤的設定:視口1:1比例、禁止使用者縮放

二、dpr : 裝置畫素比例:

1)dpr == 物理畫素(把手機上截圖放在ps中量取的大小) / 邏輯畫素(css去設定的畫素)

2)dpr怎麼獲取:

①根據ui設計圖而定:絕大部分拿到的設計圖的大小  750px/640px/

②針對性對dpr進行獲取:

如果設計圖為640px 或者 750px    選取dpr 2

如果設計圖為大於750px           選取dpr為  3

3)rem  :

①rem相對大小 : 相對於html的font-size的值而定 預設 1rem == 16px;rem布局(等比縮放)

②計算流程:假如:設計圖為750px

考慮dpr為 2 

ps中量出乙個元素為88px

設定css大小的時候 88px / dpr2 == 44px;

又因為 不能固定44px ( 44px固定之後就不能放大或者是縮小 )

所有 44px 轉成 rem

因為 html中font-size:100px;  1rem == 100px;

44px ==  0.44rem

4)視口單位:

vw      :  視口的寬的比例  100vw == 視口寬度的100%

vh      :  視口高度的比例  100vh == 視口高度的100%

vmin   :    視口的寬和高進行比較 誰小我用誰

vmax   :   視口的寬和高進行比較 誰大我用誰

5)根據設計圖先確定適配的核心裝置。

①第一種情況:設計圖為640px

設計圖640px 考慮dpr 為2

640px / 2 == 320px 

視口的寬 320px

100vw == 320px

1vw == 3.2px

31.25vw == 100px;

②第二種情況:設計圖為750px;

設計圖為750px   考慮dpr為2

750px / 2 == 375px;

視口的寬 375px;

100vw == 375px;

1vw = 3.75px;

26.67vw == 100px;

注:如果設計圖為640px  html的font-size值為31.25vw;

如果設計圖為750px  html的font-size值為26.67vw;

react 前序工作準備

1,router 配置網頁的路由結構 2,資料管理 中介軟體處理網路請求 因為dispacth只接受物件 所以有了這兩個 redux 中介軟體 redux thunk 或者 redux saga 二者區別gernerter函式 單獨的saga檔案 3,設定css pc restcss 4 flex ...

找工作準備系列1

2018 7 31日 當沒有很好的思路的時候 暴力解法無疑是最好的一種方法了,這種方法複雜度雖然很高 但是是一種思路 總比沒有任何思路要好的多 在暴力解法的基礎上在看看能不能優化 變數名 模組化 復用性高 通俗易懂 要思考是什麼樣的陣列 陣列具有什麼特徵 有沒有大量重複 三路排序 是否大部分距離正確...

移動端專案準備工作

meta name viewport content width device width,initial scale 1.0,minimum scale 1.0,maximum scale 1.0,user scalable no meta name format detection conten...