資訊專欄INFORMATION COLUMN
摘要：做移動端開發(fā)時，我自己了解了種方法，我覺得目前適合我的方法就是用來作單位，配合新的屬性來適配屏幕做開發(fā)。以上內(nèi)容為筆者總結(jié)的一些移動端開發(fā)布局的小知識，筆者知識技能有限，文章若有理解錯誤的地方還請讀者理解并指出，筆者會虛心學習。
做移動端web開發(fā)時，我自己了解了4種方法，我覺得目前適合我的方法就是用rem來作單位，配合h5新的meta屬性來適配屏幕做開發(fā)。
首先介紹一下meta標簽
name="viewport"是來告訴瀏覽器這個meta屬性是設置設備視口的
content=""是設置視口的具體內(nèi)容
width=device-width這段代碼告訴瀏覽器，頁面的寬度就等當前設備的視口寬度，
initial-scale=1,代表初始的頁面縮放比例為1，
minimum-scale=1代表縮放的最小比例為1,
maximum-scale=1代表縮放的最大比例為1
user-scalable=no代表不允許用戶進行手動縮放。
在做開發(fā)時，盡量把minimum-scale=1,maximum-scale=1帶上，因為有些第三方工具會讓頁面縮放,加上這兩個時，代表最小縮放比例為1，最大縮放比例也為1，那就是不讓用戶進行縮放。接下來說縮放比例，即就是你寫的css里的1px在屏幕上顯示也是1px的寬度，這就是1:1的縮放比例關系，當你在移動設備上做開發(fā)時，為了能讓用戶在屏幕上看的更加清晰，這時Retina屏來了，他會把畫布的大小放大到原來的2倍，也就是說現(xiàn)在我寫的css里的1px在屏幕上展示的是2px的寬度。在平時開發(fā)的時候我想要設置1px的邊框，總不可能在css里寫0.5px吧，所以為了讓1px的寬度在屏幕上顯示也是1px的寬度，就只能去對頁面進行縮放，也就是讓
這里先用0.5來說。
當縮放比例為1時，也就是我們來看看這段代碼的運行結(jié)果。
運行結(jié)果：
當縮放比例為0.5時，也就是，我們來看看這段代碼的運行結(jié)果。
這時邊框也能滿足我們的需求1px了。但是0.5哪里來的呢？別急，請看下面，咱們在開發(fā)時，有沒有注意這里的2.0
這就是縮放比，電腦屏幕縮放比為1:1，移動設備就不一樣了。大家可以看切換設備看看各種手機的縮放比。前面用的0.5，就是縮放比分之一得到的。我們在做開發(fā)時，把meta里的各種縮放比例改成縮放比分之一就行了，但是我們又如何獲取各種設備的縮放比呢，放心，js里面已經(jīng)有了獲取屏幕縮放比的屬性了，window.devicePixelRatio,比如iphone5的這個值就是2等等。這樣有了縮放比。我們就可以通過js動態(tài)設置meta標簽和里面的縮放比了，有了這些內(nèi)容，我們就能在屏幕上做到1px顯示1px的顯示了。有了這些，我們就能用我今天所要介紹的第一種方法也是我最喜歡用的方法rem布局。
1rem就是1個根元素的字體大小，也就是說html設置為20px,1rem就是20px;rem是相對于根元素html的，而em是基于父元素字體大小的。
像素還原到1:1后，我們拿寬為640的設計稿，iphone5的屏來適配，此時我們就可以按照稿子進行原模原樣的切圖，也就是設計稿某區(qū)域切出來時為多少px，css就寫多少px。最后我們把px全部轉(zhuǎn)換為rem，比如html的font-size大小是20px,div的寬度是100px,我們就可以把100px寫成5rem。就這樣一直切完整個設計稿，終于完成了切圖，布局。（彈性盒子布局很強大，建議去看看）但是當我們換一個設備比如說iphone6p時，頁面布局又亂了，這是因為我們設置的html根元素的字體大小沒變，而屏幕大小變了，導致布局變亂了，那么我們就要根據(jù)屏幕的大小動態(tài)的改變根元素的字體大小就行了。接下來看這段代碼，帶有注釋
加上上面的代碼之后，就能應用在任何尺寸不同的設備上了。
下面介紹另外三種布局方式，目前我不喜歡用這些，未來可能會混合用到
1，定死頁面寬度，直接寫一個div把寬度訂到設計稿的寬度或者你需要的寬度，然后讓它居中，再在這個div盒子里進行你的頁面開發(fā)，這種開發(fā)的缺點就是當遇到較大的屏幕時，屏幕的兩邊會流出白邊，影響美觀，體驗不好。
2，利用百分比進行開發(fā)，把元素的高度固定，寬度給百分比，缺點就是在大屏幕上，元素的寬度被拉伸，導致寬高比例不協(xié)調(diào)，不夠美觀。
3，利用響應式布局，根據(jù)不同的屏幕寬度，用不同的css樣式,這個方式代碼量大，比較復雜，不適合頁面布局復雜的大型網(wǎng)站，反而在博客，個人網(wǎng)站等比較小的網(wǎng)站上效果很好。
以上內(nèi)容為筆者總結(jié)的一些移動端開發(fā)布局的小知識，筆者知識技能有限，文章若有理解錯誤的地方還請讀者理解并指出，筆者會虛心學習。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/82755.html
摘要：實戰(zhàn)之微信錢包騰訊服務界面網(wǎng)格布局是讓開發(fā)人員設計一個網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。對于移動端適配，不同的公司不同的團隊有不同的解決方案。柵格系統(tǒng)用于處理頁面多終端適配的問題。 grid實戰(zhàn)之微信錢包 騰訊服務界面 CSS3網(wǎng)格布局是讓開發(fā)人員設計一個網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。而不是使用浮動制作一個網(wǎng)格，實際上是你將一個元素聲明為一個網(wǎng)格容器，并把元素內(nèi)容置于網(wǎng)格中。 移動端頁面適配—...
摘要：做移動端開發(fā)時，我自己了解了種方法，我覺得目前適合我的方法就是用來作單位，配合新的屬性來適配屏幕做開發(fā)。以上內(nèi)容為筆者總結(jié)的一些移動端開發(fā)布局的小知識，筆者知識技能有限，文章若有理解錯誤的地方還請讀者理解并指出，筆者會虛心學習。 做移動端web開發(fā)時，我自己了解了4種方法，我覺得目前適合我的方法就是用rem來作單位，配合h5新的meta屬性來適配屏幕做開發(fā)。首先介紹一下meta標簽 ...
閱讀 3021·2021-11-04 16:06
閱讀 850·2021-09-30 09:56
閱讀 1915·2021-09-22 10:02
閱讀 2688·2019-08-29 13:43
閱讀 2335·2019-08-29 13:42
閱讀 2387·2019-08-29 12:21
閱讀 1137·2019-08-29 11:29
閱讀 1461·2019-08-26 13:51
