網上很多都說會pc網頁開發,也就會了mobile網頁開發。那麼實際呢也是如此,但是對於新手來說卻摸不著頭腦無從下手,一直糾結於適配的問題,那麼這裡就來展示下rem適配。
展示rem適配**
//rem適配
(function () ';
})();
如果設計師給的圖是750px;那麼1rem就是750/16=46.875px;也就是1rem代表46.875px;那如果在css中要寫
.box
要怎麼寫呢?這麼寫
.box
呃呃,這個1.28怎麼來的?60px/46.875px*1rem = 1.28rem就是這麼來的。
曉得沒呢,那這樣是不是每乙個px轉rem都要這麼算呢?
沒錯,就是都要這麼算,那是不是很麻煩呢,哈哈,不要著急,這個時候呢就有了less編譯等
這裡就以less編譯舉個例子:
index.less
@rem:46.875rem;
body
編譯後
index.css
body
移動端rem適配
3 使用js 將設計圖劃分為10等份或者15等份。新建common.less檔案,這是乙個專門來適配的檔案。我們大概可以寫如下的檔案 設定常見的螢幕尺寸 修改裡面的html文字大小 a 一定要寫到最上面 html 我們此次定義的劃分的份數 為 15 no 15 320 media screen an...
移動端rem適配
前端在開發移動端頁面時,通常會使用rem對不同解析度的 螢幕進行適配,以達到更好的視覺效果。直接貼上 複製可用。一 function doc,win 乘以100,px rem 100 1 docel.style.fontsize 100 width uidpr px recalc if doc.ad...
移動端適配rem
p.p1 p.p2 p.p3 p.p4 p.p5 span.s1 span.s2 span.s3 span.s4 span.s5 span.s6 span.s7 span.s8 span.s9 span.s10 span.s11 span.s12 現在前端大多數是用rem 布局,獲取視窗的寬除以 乙...