讓頁面自適應螢幕

2021-09-17 18:33:12 字數 1276 閱讀 5759

貼**

'use strict';


/** * @param  [basefontsize = 100] - 基礎fontsize, 預設50px, 對於iphone的設計稿, 1rem=100px; 方便裸算rem; 有的是16px, 用瀏覽器預設;


* @param  [psdwidth = 750] - 設計稿預設寬度, 以750為基準;


*/object.defineproperty(exports, "__esmodule", );


var win = window;


exports.default = win.vw = function (basefontsize, psdwidth) )/i);


var isuchd = ucversion && parseint(ucversion[1].split('.').join(''), 10) >= 80;


var dpr = win.devicepixelratio || 1;


var docel = doc.documentelement;


// 為了消除安卓dpr亂標的比例


var rate = 1;


var scale = 1 / dpr;


if (isios)  else if (matches && matches[1] > 534 || isuchd) 


} else 


var metael = doc.queryselector('meta[name="viewport"]');


if (!metael) 


metael.setattribute('content', 'width=device-width,user-scalable=no,initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale);


// width/750*100, 為了統一rem為0.01rem = 1px


var setfontsize = function setfontsize() ;


setfontsize();


win.addeventlistener('resize', setfontsize);


};module.exports = exports['default'];
作用是，提高視覺稿的還原度。

配合px2rem外掛程式的使用，傳入設計稿寬度和基礎字型大小，之後所有的寬高，都按照視覺搞設定的來即可，單位用px即可。外掛程式會進行轉換，上面的**又會根據螢幕的大小，進行自動適配。

CSS web頁面自適應螢幕

今天面對如此眾多的pc瀏覽器，手機瀏覽器，不同螢幕大小，web頁面不僅要適應瀏覽器相容，還要適應螢幕大小。有可能為了移動端，再從新做一套頁面，很麻分。下面我來說說通過注意使用css的方式，在一定程度上進行螢幕自適應，避免瀏覽器螢幕適應問題。首先，使用乙個viewport 2，不使用絕對寬度 widt...

螢幕自適應

1 media screen and max width 240px 寬度小於240px執行 media screen and min width 240px 寬度大於240px執行 2 flexible.js 在所有資源載入之前先放入 3 使用數值單位時可以嘗試使用rem作為單位替代px。rem一...

如何讓UI螢幕自適應呢

在打包或者發布版本的時候肯定要適應不同型號的手機，而製作的ui之前都是把錨點固定好的，為啦不讓ui在不同的手機上露餡，我們只能讓ui自動拉伸，只需要在ui的canvas上面掛乙個指令碼就可以啦，如下 using system.collections using system.collections....