// 根据屏幕的宽度动态设置html标签的fontsize
function setHTML() {
// 基础值
var baseVal = 100;
// 设计稿的宽度
var pageWidth = 375;
// 当前屏幕的宽度
var screenWidth = document.querySelector("html").offsetWidth;
// 要设置fontsize
var fz = screenWidth * baseVal / pageWidth;
// 赋值给HTML标签
document.querySelector("html").style.fontSize = fz + "px";
}
//屏幕大小变化时加载
window.onresize = function () {
setHTML();
}
})
// 根据屏幕的宽度动态设置html标签的fontsize function setHTML() { // ...
Layout Skill 使用vw定制rem自适应布局 要点：移动端使用rem布局需要通过JS设置不同屏幕宽高比的...
遇到项目需求变更，需要自适应4:3主流屏幕，于是采用了rem，和动态js计算根元素。 1.rem rem是指相对于...
H5-WebApp 自适应方案 - rem 对于WebApp来说，为了更通用地满足各机型屏幕的自适应布局要求，我们...
设计稿尺寸为750 * 1340，移动端rem自适应方案一般分2种一、网易做法整个屏幕为7.5rem，1rem=1...
html动态设置根字体大小（页面字体使用rem单位可根据屏幕大小自适应） 1.新建rem.js文件 (functi...
移动h5 图片字体等适配WebApp开发之--"rem"单位Rem实现自适应初体验手机端页面自适应解决方案—rem布局
自适应图片大小、位置自定义文字大小、位置自适应核心：获取屏幕像素，用该像素转换成和设计稿对等的rem，每次设置大小...
温故知新 目前主流的自适应终端屏幕的方法主要分为rem布局和响应式布局等。下面简单介绍一下这两种布局：1.rem布...
css单位：％，ｐｘ，ｅｍ，ｒｅｍ，ｖｗ，ｖｈ等 ｅｇ：设置一个矩形的宽高比为１６:９，并且岁屏幕宽度自适应时，除...
本文标题：js-屏幕自适应rem
本文链接：https://www.haomeiwen.com/subject/qrolbftx.html
网友评论