【Azure DevOps系列】如何在Azure DevOps上構建Docker映象(一)
在PC端,螢幕1200兩端留白
在PE端就不行,首先它沒有1200px那麼大的寬度,其次不能留白,很醜
就需要在手機螢幕上鋪滿內容
Viewport
在移動裝置上進行網頁的重構或者開發,首先我們就要搞明白viewport,只有弄明白viewport概念以及與其相關的meta標籤的使用,才能更好的讓我們的網頁適配或者響應不同解析度的移動裝置
- Viewport的概念
裝置螢幕上能用來顯示我們網頁的那一塊區域
獲取視口大小:document.documentElement.clientWidth
移動裝置上的瀏覽器會把自己預設的視口大小設為980px或者1024px(由裝置決定的)
各個瀏覽器預設的視口大小
使用預設視口給網頁帶來的後果:出現橫向滾動條
因為瀏覽器的可視區域是比這個預設的視口大小要小一些
- Css中的1px不等於裝置的1px
Css中的1px在不同裝置或不同環境下都不一樣
在早先的移動裝置上,(iPhone3上,css的1px確實等於裝置的1px)
但是在iPhone4開始,蘋果公司高分子顯示屏,會使解析度提高一倍從而使得螢幕更加的清晰,但是螢幕尺寸卻沒有變化,這意味著同樣大小的螢幕上,畫素提高了一倍,在這個時候,css中的1px是等於兩個物理畫素的,其他移動裝置也是這個道理
還有一個點,雙指放大功能,如果使用者吧頁面放大一倍,那麼css中的1px也會相應的增加一倍,反之一樣
利用meta標籤對viewport進行控制
<meta name="viewport" content="width=device-width,initial-scale=1.0,maxiumu-scale=1.0,user-scalable=0"/>
在蘋果的規範中,metaviewport有6個屬性
這些屬性可以同時使用,也可以單個使用,多個屬性之間用逗號隔開
那麼剛剛的meta標籤有什麼作用呢?
寬度等於當前裝置的寬度,初始縮放倍數:1,最大縮放倍數:1,不允許使用者進行縮放操作
怎麼把螢幕鋪滿:rem
W3cschool中給出的css尺寸單位:
Rem是什麼
前面說“em”是相對與其父元素來設定字型大小,那麼這樣就會存在一些問題,進行任何的元素設定,我們都需要知道其父元素的大小,在我們多次使用的時候,就會帶來無法預知的錯誤,但是rem是相對於根元素<html>,這樣的話,我們就只需要在根源上確定一個參考值
瀏覽器的相容性
Rem是CSS3新引進來的一個度量單位,那麼瀏覽器對其的支援情況是否樂觀?
比如說火狐,蘋果瀏覽器,谷歌瀏覽器都相容,有一個不相容那就是IE8(好慘)
以前的手機螢幕大小:320px
有一個好辦法,將螢幕分成16份 每一份就是320/16=20px
如果一個div100px,5份
一直延續下來,一直是16份
由於技術的更新導致PE端裝置螢幕解析度變高,所以再分成十六份的話就會出現小數,不利於計算,所以我們只取一位小數四捨五入
Px與rem的轉換:
- 取得1rem的畫素是多少
- 用想要轉換的px除以1rem的畫素