移動端前端頁面實現學習筆記

2021-08-07 15:52:04 字數 1161 閱讀 1947

1、設計稿

建議讓ui設計師將設計稿設計成750*1334的大小，這個是iphone6的的解析度的兩倍大小。

2、開始編寫前端頁面，設定好html的font-size

寫頁面之前先設定好html的font-size,例：

html
可以使用響應式設定某種裝置的html的font-size，使得可以匹配當前裝置的大小，例如：

html


@media screen and (min-width:321px) and (max-width:375px)}


@media screen and (min-width:376px) and (max-width:414px)}


@media screen and (min-width:415px) and (max-width:639px)}


@media screen and (min-width:640px) and (max-width:719px)}


@media screen and (min-width:720px) and (max-width:749px)}


@media screen and (min-width:750px) and (max-width:799px)}


@media screen and (min-width:800px)}
有乙個可以匹配所有解析度的做法，當設計稿是750*1334時，例：

(function (doc, win) ;


if (!doc.addeventlistener) return;


win.addeventlistener(resizeevt, recalc, false);


doc.addeventlistener('domcontentloaded', recalc, false);


})(document, window);
3、新增頭部meta

4、接下來就可以寫樣式了，當設計稿（此設計稿為750*1334）p元素的字型大小為28px,高度為80px，寬度為400px，樣式如下：
p

span
這樣就可以開始移動端頁面的編寫了。

前端學習筆記 移動端適配之我見

內容參考自 我們知道網頁很寬，而移動裝置例如手機很窄，如果不進行螢幕適配，很容易導致網頁錯亂。那麼螢幕適配有哪些方法呢？首先是大家通常會想到的meta標籤。利用meta標籤中viewport的通用屬性來處理。6屬性 1新屬性 width 設定layout viewport的寬度，正整數或字串 dev...

C 功能實現學習筆記

某個路徑下建立資料夾 需要建立資料夾的路徑 資料夾名稱 public static string createfolder string path,string foldername return path 建立資料夾 資料夾的絕對路徑 public static string createfold...

Redis設計實現 學習筆記

最近在準備面試，問到redis相關知識，只能說個皮毛，說的既不深入也不全面，所以抓緊突擊一下，先學 redis設計與實現 選擇看書的原因是 書中全面深入，且能出書一定十分用心 搜部落格也找不到比書更全面的文章，且費時 直接看原始碼乙個是對c掌握不好，且易困，效率不高，所以跟著書同步學原始碼，是我認為...