寫手機端自適應的前端,一般用啥實現?

時間 2021-06-07 23:21:20

1樓:Keycode

@media screen:根據顯示器畫素比來動態修改控制項顯隱(主要用於pc)

vw:目前市面很少出現但及其好用的適配單位,設定在根節點上rem:rem(依據 - 根節點),美團和去哪網就採用的這個oo~% + em:

百分比決定寬高,em(依據-父節點)決定細節(如字型,shadow等)

2樓:夜盡天明

以寬為 750px 的移動設計稿為例:

// 螢幕適配(windowWidth/設計稿寬*100) ——*100為了方便計算。即font-size值是手機deviceWidth與設計稿比值的100倍

document.getElementsByTagName('html')[0].style.

fontSize=window.screen.width/7.

5+'px';

// 如上:通過查詢螢幕寬度,動態的設定html的font-size值,設計稿大多以750*1334 設定的,通過上述換算後,在設計圖上一張150*150的圖,在css中對應的rem值則為:1.

5*1.5rem

用法 :

比如上圖的,全省的寬 280px ,高 58px , 正常開發下,程式的css上需要寫 :

但是我們只需要::

也即是:

換算公式就是具體: 畫素/100 = rem, 還能指定 7.5rem 寬就是螢幕的總寬

如果是寬為 1080px 的設計稿:

document

.getElementsByTagName

('html')[0

].style

.fontSize

=window

.screen

.width

/10.8

+'px'

;如上內容,就可以適配移動端了。

你的手機一般用多久?

一年多吧。再早的記不得了,一開始用中興遠航3,用了兩年多 我竟然能忍受的下來 然後換了個MANN ZUG 5SQ 比較小眾 用了一年半不到 然後換了個華為P20用了11個月多一點 然後就是現在手裡的三星NOTE8了,用了乙個多月差不多吧 其實就我個人來說,我認為手機這東西主要是自己用的順心 舒服,覺...

前端自動化一般用什麼工具?

吳建濤 Gulp Sass WebPack Jade Babel leolord Kickoff GitHub 小爝 如果是想簡單的打包合併壓縮並且不想寫複雜的配置檔案,不想要複雜的環境配置,不想學什麼grunt,gulp,不想看太多無用的文件浪費腦細胞 推薦試試我這個 SinaMTD Mobile...

手機一般用多長時間換?

北島 17年買的一加六,質量很好,用了三年還比較流暢,其實本來打算用到不能用再換了 應該能用到博畢業 因為是家裡人給買的,總覺得有特殊意義,本身對手機需求也不高,就不太想換,但是沒想到前兩天老媽又給買了一部榮耀10X,就趁勢換了,說實話現在換手機挺麻煩的,裡面有很多實驗資料和生活上的東西要乙個個篩選...