立诚勿怠,格物致知
It's all about connecting the dots

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,是不是计算起来很方便-_-。

赞(2) 打赏
版权声明:非商业用途转载请注明文章链接,商业用途转载请联系邮箱获取授权。
文章名称:《rem-移动端响应式适配方案》
文章链接:https://www.orzzone.com/rem-mobile-responsive-design.html
商业联系:yakima.public@gmail.com
本站内容仅供个人学习交流,不做为任何投资、建议的参考依据,因此产生的问题需自行承担。

评论 抢沙发

大前端WordPress主题 更专业 更方便

支持快讯、专题、百度收录推送、人机验证、多级分类筛选器,适用于垂直站点、科技博客、个人站,扁平化设计、简洁白色、超多功能配置、会员中心、直达链接、文章图片弹窗、自动缩略图等...

去看看

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

非常感谢你的打赏,我们将继续给力提供更多优质内容!

支付宝扫一扫打赏

微信扫一扫打赏

登录

找回密码

注册