寫手機端頁面應該注意的地方

2022-02-19 09:29:16 字數 1263 閱讀 1243

畫素

:乙個畫素就是計算機螢幕所能顯示的一種特定顏色的最小區域。

畫素分為:裝置畫素和css畫素。

視口:是html的父元素,即視口為初始包含塊

視口分為:

在手機上為了容納為桌面瀏覽器設計的**,預設的布局視口寬度遠大於螢幕的寬度

意為將布局視口的寬度設為理想視口

關於視口:

在pc端,布局視口就是瀏覽器視窗

在m站,視口分為布局視口和視覺視口

m站還有乙個理想視口(理想視口的尺寸因裝置和瀏覽器不同而不同,且可以將布局視口的寬度設為理想視口)

裝置畫素比(dpr)device pixel rati  簡稱(dpr)

dpr成立的前提是縮放比為1。

dpr=裝置畫素個數/理想視口css畫素個數(device-width).

device-width意為裝置螢幕的寬度

標籤適用於dpr=2的裝置

適用於所有裝置:

在適應了所有裝置之後遇到了div的寬高不會隨著螢幕的大小而變化所以可以在乙個js檔案中加上:

document.documentelement.style.fontsize=document.documentelement.clientwidth/10+"px";

不同的裝置現在可以等比縮放了,但是有乙個缺點:轉換尺寸時要除以75需要借助計算器,影響效率,且會出現除不盡的情況,使頁面存在偏差。

方法2:

不修改meta標籤

7.5是以rem為單位的頁面總寬,是蘋果6的寬度,蘋果5的話是除以其他的

(思考:覺得這樣不好用不同的螢幕難道還要寫不同的嗎?

)文字字型不需要換算成rem可用下面的**

在螢幕最大是321px時body中預設字型的大小:

@media screen and (max-width:321px)

}在螢幕大小在321px和400px之間時body中預設字型的大小

@media screen and (min-width:321px)and(max-width:400px) 

}在螢幕最大是400px時body中預設字型的大小

@media screen and(min-width:400px)

}片段二:

@media screen and (max-width:321px)

}@media screen and (min-width:321px)and(max-width:400px)

}@media screen and(min-width:400px)

}

面試應該注意的地方

摘自 size large 面試官是找合適的人,而不是最優秀的人!面試的目的就是希望了解面試者的兩個方面,應聘者是否有足夠的技能,應聘者是否能和現在的團隊融合並完成期望的工作。說實話,面試成功關鍵是看你過去的努力程度和你是個什麼樣的人,技巧的用處很少,因為還有試用期,最終總是會看到你真實的一面,技巧...

客戶端啟動閃退應該注意的地方

客戶端啟動閃退應該注意的地方 3秒過後跳轉到首頁。沒錯就是這個原因,客戶端本來要請求格式為json,此時返回的是html,如果客戶端沒有做判斷,肯定要出錯了。知道的原因,肯定要解決了 原理看看能不能解析成json ios 1.nsjsonserialization jsonobjectwithdat...

程式設計開發應該注意的地方

程式開發中應該注意的地方!1 函式編寫的時候是否藉口型別一致 2 if 是否可以跳出 3 while for是否會發生死迴圈 4 巨集的優先順序是否 5 所有指標使用前是否可能合法 6 全域性變數是否是多程序共同使用,是否加鎖 7 巢狀鎖是否按照順序進行,會不會發生死鎖 8 程式優化的時候是否對部分...