国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

移動端web布局方案的知識總結

rainyang / 2320人閱讀

摘要：做移動端開發時，我自己了解了種方法，我覺得目前適合我的方法就是用來作單位，配合新的屬性來適配屏幕做開發。以上內容為筆者總結的一些移動端開發布局的小知識，筆者知識技能有限，文章若有理解錯誤的地方還請讀者理解并指出，筆者會虛心學習。

做移動端web開發時，我自己了解了4種方法，我覺得目前適合我的方法就是用rem來作單位，配合h5新的meta屬性來適配屏幕做開發。
首先介紹一下meta標簽

name="viewport"是來告訴瀏覽器這個meta屬性是設置設備視口的
content=""是設置視口的具體內容
width=device-width這段代碼告訴瀏覽器，頁面的寬度就等當前設備的視口寬度，
initial-scale=1,代表初始的頁面縮放比例為1，
minimum-scale=1代表縮放的最小比例為1,
maximum-scale=1代表縮放的最大比例為1
user-scalable=no代表不允許用戶進行手動縮放。

在做開發時，盡量把minimum-scale=1,maximum-scale=1帶上，因為有些第三方工具會讓頁面縮放,加上這兩個時，代表最小縮放比例為1，最大縮放比例也為1，那就是不讓用戶進行縮放。接下來說縮放比例，即就是你寫的css里的1px在屏幕上顯示也是1px的寬度，這就是1:1的縮放比例關系，當你在移動設備上做開發時，為了能讓用戶在屏幕上看的更加清晰，這時Retina屏來了，他會把畫布的大小放大到原來的2倍，也就是說現在我寫的css里的1px在屏幕上展示的是2px的寬度。在平時開發的時候我想要設置1px的邊框，總不可能在css里寫0.5px吧，所以為了讓1px的寬度在屏幕上顯示也是1px的寬度，就只能去對頁面進行縮放，也就是讓
這里先用0.5來說。
當縮放比例為1時，也就是我們來看看這段代碼的運行結果。

運行結果：

當縮放比例為0.5時，也就是，我們來看看這段代碼的運行結果。

這時邊框也能滿足我們的需求1px了。但是0.5哪里來的呢？別急，請看下面，咱們在開發時，有沒有注意這里的2.0

這就是縮放比，電腦屏幕縮放比為1:1，移動設備就不一樣了。大家可以看切換設備看看各種手機的縮放比。前面用的0.5，就是縮放比分之一得到的。我們在做開發時，把meta里的各種縮放比例改成縮放比分之一就行了，但是我們又如何獲取各種設備的縮放比呢，放心，js里面已經有了獲取屏幕縮放比的屬性了，window.devicePixelRatio,比如iphone5的這個值就是2等等。這樣有了縮放比。我們就可以通過js動態設置meta標簽和里面的縮放比了，有了這些內容，我們就能在屏幕上做到1px顯示1px的顯示了。有了這些，我們就能用我今天所要介紹的第一種方法也是我最喜歡用的方法rem布局。
1rem就是1個根元素的字體大小，也就是說html設置為20px,1rem就是20px;rem是相對于根元素html的，而em是基于父元素字體大小的。
像素還原到1:1后，我們拿寬為640的設計稿，iphone5的屏來適配，此時我們就可以按照稿子進行原模原樣的切圖，也就是設計稿某區域切出來時為多少px，css就寫多少px。最后我們把px全部轉換為rem，比如html的font-size大小是20px,div的寬度是100px,我們就可以把100px寫成5rem。就這樣一直切完整個設計稿，終于完成了切圖，布局。（彈性盒子布局很強大，建議去看看）但是當我們換一個設備比如說iphone6p時，頁面布局又亂了，這是因為我們設置的html根元素的字體大小沒變，而屏幕大小變了，導致布局變亂了，那么我們就要根據屏幕的大小動態的改變根元素的字體大小就行了。接下來看這段代碼，帶有注釋

加上上面的代碼之后，就能應用在任何尺寸不同的設備上了。
下面介紹另外三種布局方式，目前我不喜歡用這些，未來可能會混合用到
1，定死頁面寬度，直接寫一個div把寬度訂到設計稿的寬度或者你需要的寬度，然后讓它居中，再在這個div盒子里進行你的頁面開發，這種開發的缺點就是當遇到較大的屏幕時，屏幕的兩邊會流出白邊，影響美觀，體驗不好。
2，利用百分比進行開發，把元素的高度固定，寬度給百分比，缺點就是在大屏幕上，元素的寬度被拉伸，導致寬高比例不協調，不夠美觀。
3，利用響應式布局，根據不同的屏幕寬度，用不同的css樣式,這個方式代碼量大，比較復雜，不適合頁面布局復雜的大型網站，反而在博客，個人網站等比較小的網站上效果很好。

以上內容為筆者總結的一些移動端開發布局的小知識，筆者知識技能有限，文章若有理解錯誤的地方還請讀者理解并指出，筆者會虛心學習。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82755.html

相關文章

  • 移動端布局與適配

    摘要：實戰之微信錢包騰訊服務界面網格布局是讓開發人員設計一個網格并將內容放在這些網格內。對于移動端適配，不同的公司不同的團隊有不同的解決方案。柵格系統用于處理頁面多終端適配的問題。 grid實戰之微信錢包 騰訊服務界面 CSS3網格布局是讓開發人員設計一個網格并將內容放在這些網格內。而不是使用浮動制作一個網格，實際上是你將一個元素聲明為一個網格容器，并把元素內容置于網格中。 移動端頁面適配—...

    Clect 評論0 收藏0

  • 移動端web布局方案的知識總結

    摘要：做移動端開發時，我自己了解了種方法，我覺得目前適合我的方法就是用來作單位，配合新的屬性來適配屏幕做開發。以上內容為筆者總結的一些移動端開發布局的小知識，筆者知識技能有限，文章若有理解錯誤的地方還請讀者理解并指出，筆者會虛心學習。 做移動端web開發時，我自己了解了4種方法，我覺得目前適合我的方法就是用rem來作單位，配合h5新的meta屬性來適配屏幕做開發。首先介紹一下meta標簽 ...

    付永剛 評論0 收藏0

  • HTML-CSS

    摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

    xiaokai 評論0 收藏0

  • HTML-CSS

    摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

    CHENGKANG 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<