移动端页面单位的选择（px, em, rem, vw）

您所在的位置：网站首页 › 网站字体大小合适 › 移动端页面单位的选择（px, em, rem, vw）

移动端页面单位的选择（px, em, rem, vw）

2024-06-26 02:25| 来源: 网络整理| 查看: 265

px, em, rem的区别：

px:绝对字体大小 em:基于一个基数来计算出相对字体大小。(移动端用的少) rem:基于根节点（html）的字体大小来计算。 vw:可视区宽度单位。1vw等于可视区宽度的百分之一。

跟字体大小有关

#container{ font-size: 20px; /*1em = 20px*/ width: 5em; /* width = 20 * 5px*/ height: 5em; /* height = 20 * 5px*/ } #box{ width: 20em; /* width = 20 * 20px*/ height: 20em; /* height = 20 * 20px*/ }

l浏览器默认字体是16px,这里父级字体大小是20px,所以#box里的1em = 20px;即#box是一个长宽均为400px的正方形

vw单位和百分比很相似，不同的是vw的值对所有的元素都一样，与他们父元素或父元素的宽度无关以414宽度的屏幕为例做一个200 * 200的盒子

html { font-size: 4vm; /* 4 * 4.14 = 16.56*/ } #box{ width: 12.077294685990339rem; /* 200 / 16.56 = 12.077294685990339*/ height: 12.077294685990339rem; } rem

rem 的字体大小直接与html的字体大小有关。默认是16px = 1rem; 我们可以给html设置10px的字体大小

html { font-size: 10px /*即： 10px = 1rem*/ }

大多数浏览器（不包括ie8以下）都支持rem单位，如果想都支持，可以

html{ font-size: 10px /* 或者 font-size: 62.5%*/ /* 10/16 = 62.5%*/ } p{ font-size:15px; font-size:1.5rem}

可是这样在实际开发中，换算起来非常麻烦，所以，我们对此进行了修改，根据手机屏幕的大小，做了自适应。首先，我们在html的head里边设置html的font-size.

html{ font-size: 100px !important; }

然后根据设计图的尺寸和手机屏幕的尺寸进行换算。

// designWidth: 设计稿的实际宽度值 // maxWidth: 制作稿的最大宽度值 ;(function(designWidth, maxWidth){ var doc = document, win = window, docEl = doc.documentElement, remStyle = doc.createElement("style"), tid; function refreshRem() { var width = docEl.getBoundingClientRect().width; maxWidth = maxWidth || 540; width > maxWidth && (width = maxWidth); var rem = width * 100 / designWidth; remStyle.innerHTML = 'html{font-size:' + rem + 'px}'; } if (docEl.firstElementChild) { docEl.firstElementChild.appendChild(remStyle); } else { var wrap = doc.createElement("div"); wrap.appendChild(remStyle); doc.write(wrap.innerHTML); wrap = null; } // 要等viewport设置好后才能执行refreshRem，不然会执行2次 refreshRem(); win.addEventListener("resize", function() { clearTimeout(tid); // 防止执行2次 tid = setTimeout(refreshRem, 300) },false) win.addEventListener("pageshow", function(e){ if(e.persisted) { clearTimeout(tid) tid = setTimeout(refreshRem, 300) } }, false) if (doc.readyState === "complete"){ doc.body.style.fontSize = "16px" } else { doc.addEventListener("DOMContentLoaded",function(e){ doc.body.style.fontSize = "16px" }, false) } })(750, 750)

【本文地址】

移动端页面单位的选择（px, em, rem, vw）

移动端页面单位的选择（px, em, rem, vw）

今日新闻

推荐新闻