摘要:已更新強力推薦移動端自適應解決方案與仿原生超高清超細膩解決方案新增了功能,開啟了功能后,可以自動設置設備尺寸為物理分辨率使網(wǎng)頁達到原生精細效果。
已更新 - 強力推薦 (移動端自適應解決方案與仿原生APP超高清超細膩解決方案)
https://gitlab.com/fekits/mc-...
v1.1.0 [Latest version]
1、新增了dpr功能,開啟了DPR功能后,可以自動設置設備尺寸為物理分辨率使網(wǎng)頁達到原生APP精細效果。就是解決經(jīng)典的1px太粗問題
2、新增了fixed參數(shù)可以設置字號縮放時的小數(shù)字精度。
首先仍然先上DEMO,這個DEMO開啟了DPR功能,請注意看1px線條粗細度與清晰度,因沒有足夠的老機型,目前并未發(fā)現(xiàn)DPR功能開啟后有兼容問題,目前測試機有iphone5s,iphone6s,iphone7s Plus,iphone4,小米(未注意型號),魅族(未注意型號安卓4.4.4),如果您發(fā)現(xiàn)了任何題麻煩你剪屏聯(lián)系我,謝謝!
http://www.junbo.name/plugins...
// 復制這一段放在HTML頭部即可========= // 寫尺寸規(guī)則:所有尺寸寫設計稿尺寸/100,比如設計稿寬600px寫width:6rem,設計稿字號28px寫fint-size:.28rem;// 復制這一段放在HTML頭部即可=========
以下為v1.0.0版本
RATIO.JS使用簡單復制粘帖即用。亮點:全屏模式可開啟寬高雙向自適應!
先看效果:http://junbo.name/plugins/ratio/ 建議打開調試臺使用移動端模式查看,前端都懂的!
全屏頁面使用示例:
// 復制這一段放在HTML頭部即可========= function ratio(i){var c=document.documentElement,l=i.el||c,o=i.size[0],s=i.size[1]/o,d=i.full,e=function(){var e,t=c.clientWidth,n=c.clientHeight;e=d&&n/t滾動頁面使用示例:
ratio({size: [750, 1334], full:0}); // full改成false或0或不寫
gitlab網(wǎng)址:https://gitlab.com/fekits/mc-...
文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/100889.html
摘要:背景現(xiàn)在工作中有超過一半的時間用于移動端項目的開發(fā),包括嵌入頁,微信頁面和移動頁。經(jīng)過研究,我在公司的多個移動端項目使用了布局來解決移動端自適應布局的問題。簡單的說它就是一個相對單位,布局是一個流行的解決移動端響應式布局的方案。 背景 現(xiàn)在工作中有超過一半的時間用于移動端項目的開發(fā),包括app嵌入頁,微信頁面和移動wap頁。 開發(fā)移動端頁面跟開發(fā)PC頁面的一個大區(qū)別就是移動端對響應式布...
摘要:本文同步發(fā)布于我的個人博客上移動端自適應布局不管是面試還是工作過程中,移動端的布局都比較常見,而移動端適配方法也是多種多樣。表示當前視口寬度的百分之一。同時在移動端,的兼容性還不錯,完全可以直接使用。這樣完成了一個簡單好用的移動端布局了 本文同步發(fā)布于我的個人博客上 - vw+rem移動端自適應布局 不管是面試還是工作過程中,移動端的布局都比較常見,而移動端適配方法也是多種多樣。一般來...
閱讀 1329·2021-11-15 11:37
閱讀 2214·2021-09-23 11:21
閱讀 1300·2019-08-30 15:55
閱讀 2105·2019-08-30 15:55
閱讀 2815·2019-08-30 15:52
閱讀 2819·2019-08-30 11:12
閱讀 1573·2019-08-29 18:45
閱讀 1885·2019-08-29 14:04