欢迎光临
我们一直在努力

rem-移动端响应式适配方案

借助rem单位,我们可以实现移动端网页内元素随着屏幕宽度的改变而正相关地改变大小。假设美工提供的设计稿宽度为750px。那么你需要用类似下面这样的代码去动态修改html元素的font-size值,进而影响那些使用rem为单位设定尺寸的元素的大小。

import { $, getLocalStorage } from '@/scripts/utils.js'

function fit () {
  const scale = $('body').width() / 750
  $('html').css('font-size', 100 * scale + 'px')
}

$(document).ready(() => {
  // 如果你需要单独处理pc端的样式,可以去掉下面的注释
  // const userAgent = window.navigator.userAgent.toLowerCase()
  // if (userAgent.indexOf('android') === -1 && userAgent.indexOf('iphone') === -1) {
  //   $('body').addClass('pc')
  // }
  $('html').css('height', $(window).height() + 'px')
  fit()
  $(window).resize(fit)
})

然后页面上的元素,就根据从750px的设计稿上量取到的长度,除以100,来计算采用rem单位时需要写的值。比如,如果一个div在750px设计稿上对应的宽度为600px,那给这个div写宽度值时就可以这么写:

.div {
  width: 6rem;
}

直接除以(对,除和除以是不一样的。。。)100,是不是计算起来很方便-_-。

赞(0) 打赏(金额可任意指定)
未经允许不得转载:峰间的云 » rem-移动端响应式适配方案
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

上海宝山顾村棉被加工店 专业加工新旧棉被

查看详情了解一下

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏