移動端web自適應適配布局解決方案

番茄西紅柿發布于2019-04-23 11:50 / 752人閱讀

摘要：還原設計圖，要注意看布局，分析結構。感覺難點在于測量精度測量數據文字的行高。

100%還原設計圖，要注意：

看布局，分析結構。

感覺難點在于： 1.測量精度（ps測量數據）； 2.文字的行高。

前段時間寫個移動端適配的頁面（剛接觸這方面），查了一些資料，用以下方法能實現：

1.設置理想視口： 自動適應屏幕寬度：網頁的寬度默認等于屏幕的寬度

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

2.動態設置fontSize：

function resize() {
    let width = window.screen.width;
    const basicvalue = 1024; //設計稿上的分辨率大小
    
    //放大100倍，為了方便計算rem大小
    document.documentElement.style.fontSize = (width / basicvalue) * 100 + px;
}

//加上以下代碼是為了切換設備時能時刻刷新動態fontSize，從而得到正確的布局
window.addEventListener(resize, function () {
    resize();
});
window.addEventListener(DOMContentLoaded, function () {
   resize();
});

3.還需要css樣式中用@media設置fontSize： 需要額外的媒介查詢

html{
   font-size: 100px;
}

@media only screen and (min-device-width:320px) and (max-device-height:568px){
   html{
      font-size: 42.6667px;
   }
}
@media only screen and (min-device-width:375px) and (-webkit-min-device-pixel-ratio:2){
   html{
      font-size: 50px;
   }
}
@media only screen and (min-device-width:412px) and (-webkit-min-device-pixel-ratio:3){
   html{
      font-size: 55.2px;
   }
}

之后布局的寬高及邊距等都可以用rem來布局了，即100px = 1rem；若有什么問題，可以指出來，指導指導我，互相學習哈哈哈！

GPU云服務器云服務器移動端自適應移動端適配方案 web移動端布局移動端適配

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

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

移動前端 - 收藏集 - 掘金

摘要：使用移動設備查看頁面時會發現，在微信瀏覽器中有頂部導航欄有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。移動端實踐前端掘金說起，相信大家并不陌生。 Sticky Footer，完美的絕對底部 - 前端 - 掘金寫在前面做過網頁開發的同學想必都遇到過這樣尷尬的排版問題：在主體內容不足夠多或者未完全加載出來之前，就會導致出現（圖一）的這種情況，原因是因為...

Jochen 2019-08-29 12:43 評論0 收藏0
HTML-CSS

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

xiaokai 2019-08-01 18:21 評論0 收藏0
HTML-CSS

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

CHENGKANG 2019-08-29 14:11 評論0 收藏0
移動端布局與適配

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

Clect 2019-08-29 14:08 評論0 收藏0
Web網頁布局的主要方式

摘要：改變屏幕分辨率可以切換不同的靜態局部頁面元素位置發生改變，但在每個靜態布局中，頁面元素不隨窗口大小的調整發生變化。即創建多個流體式布局，分別對應一個屏幕分辨率范圍。一、靜態布局（static layout）　　即傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位。 1、布局特點　　不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。常規的pc的網站都是靜態...

blastz 2019-08-30 13:50 評論0 收藏0