挪动端rem合理布局的两种完成方式

日期:2021-01-20 类型:科技新闻 

关键词:小程序制作流程,抽奖小程序,微信小程序怎么开店,小程序码生成,小程序模版

据掌握,如今有两种rem合理布局的款式操纵,在其中1种是根据css的新闻媒体查寻,此外1种是根据引进js来操纵,这两种方式都有各的优势,可是我還是喜爱用引进js的方式来完成rem合理布局,虽然如今市面上上大多数数都在应用css新闻媒体查寻的方法完成,在此我就将这两种方式做1总结:

方式1:常见方式,css新闻媒体查寻

@media only screen and (max-width: 600px), only screen and (max-device-width:400px) {
  html,body {
    font-size:50px;
  }
}
@media only screen and (max-width: 500px), only screen and (max-device-width:400px) {
  html,body {
    font-size:40px;
  }
}
@media only screen and (max-width: 400px), only screen and (max-device-width:300px) {
  html,body {
    font-size:30px;
  }
}
.box{
  border: 1rem solid #000;
  font-size: 1rem;
}

针对这类方式而言,他仅仅根据css文档便可以完成,在载入网页页面的全过程中,恳求的文档较少,可是假如应用的两个挪动端机器设备显示屏宽度相差不大,都在新闻媒体查寻所设定的同1区段,那末网页页面中的文本尺寸等不容易转变,但是应用引进js的方式就不1样了。

方式2:引进js

// 要求:依据设计方案图的占比去动态性设定不一样显示屏下应对应的font-size值
// 这段JS不必加上通道涵数,而且引入的情况下放到最前面
// ui的尺寸依据自身的要求去改
// 设计方案图的宽度
var ui = 750;
// 自身设置的font值
var font = 40;
// 获得占比值
var ratio = ui/font;
var oHtml = document.documentElement;
var screenWidth = oHtml.offsetWidth;
// 原始的情况下启用1次
getSize();
window.addEventListener('resize', getSize);
// 在resize的情况下动态性设定fontsize值
function getSize(){
  screenWidth = oHtml.offsetWidth;
  // 限定区段
  if(screenWidth <= 320){
    screenWidth = 320;
  }else if(screenWidth >= ui){
    screenWidth = ui;
  }
  oHtml.style.fontSize = screenWidth/ratio + 'px';
}

这类根据引进js的方式,应对不一样规格的挪动端机器设备,都能完成文本尺寸等规格的微小转变。