レスポンスフォントサイズ(移動先)
6007 ワード
:
1、initial-scale 1;
2、 css ( base、common , ), html fontSize 100px( ), ;
html{fontSize:100px}
CSS
html{height:100%;position:relative;} body{margin:0 auto;height:100%;}
方法1
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
};
// Abort if browser does not support addEventListener
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
方法2
new function (){
var _self = this ;
_self.width = 640; //
_self.fontSize = 100; //
_self.widthProportion = function (){ var p = (document.body&&document.body.clientWidth||document.getElementsByTagName("html")[0].offsetWidth)/_self.width;return p>1?1:p<0.5?0.5:p;};
_self.changePage = function (){
document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important");
}
_self.changePage();
window.addEventListener('resize', function (){_self.changePage();}, false );
};
方法3
!(function(win, doc){
function setFontSize() {
// window
// zepto $(window).width()
var winWidth = window.innerWidth;
doc.documentElement.style.fontSize = (winWidth / 640) * 100 + 'px' ;
}
var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
var timer = null;
win.addEventListener(evt, function () {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}
}, false);
//
setFontSize();
}(window, document))
メソッド4(メディアクエリー)
換算remツール(https://offroadcode.com/prototypes/rem-calculator/)
@charset "UTF-8";
/* 320px */
html {
font-size: 100px; }
body {
font-size: 0.14rem; }
/* iphone 6 */
@media (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
html {
font-size: 117.1875px; } }
/* iphone6 plus */
@media (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
html {
font-size: 129.375px; } }
p {
border: 1px solid #eee;
padding: 0.1rem; }
.f12 {
font-size: 0.12rem; }
.f14 {
font-size: 0.14rem; }
.f16 {
font-size: 0.16rem; }
.f24 {
font-size: 0.24rem; }
.f30 {
font-size: 0.30rem; }
.f36 {
font-size: 0.36rem; }