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

番茄西紅柿發(fā)布于2019-04-23 11:50 / 761人閱讀

摘要：還原設計圖，要注意看布局，分析結(jié)構(gòu)。感覺難點在于測量精度測量數(shù)據(jù)文字的行高。

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

看布局，分析結(jié)構(gòu)。

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

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

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

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

2.動態(tài)設置fontSize：

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

//加上以下代碼是為了切換設備時能時刻刷新動態(tài)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移動端布局移動端適配

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1237.html

移動前端 - 收藏集 - 掘金

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

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

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

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

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

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

摘要：實戰(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)格中。移動端頁面適配—...

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

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

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