美文网首页
自适应布局

自适应布局

作者: glassUp | 来源:发表于2022-08-31 22:45 被阅读0次

自适应布局

所谓前端适配,就是为了让移动设计稿在大部分的移动设备上看起来有一致的展示效果,目前比较流行的方法有两种。一种是强制meta viewport宽度为设计稿宽度,一种是使用rem自适应布局的flexible.js。

当前流行的移动端自适应方案

rem + 淘宝无限适配

rem布局:

rem是css中的单位,而且是相对单位,rem单位是基于html中根元素的字体大小。(因此我们只需要动态改变根元素的字体大小从而达到自适应的目的)

淘宝无线适配:

根据屏幕宽度划分成十等分,其中一份的宽度就是根元素字体的大小

//meta视口标签
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

源码 flexible.js

  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

github上的地址:lib-flexible/index.js at 2.0 · amfe/lib-flexible (github.com)

VSCode自动将px转化为rem

1.下载插件cssrem
2.vscode中打开文件 ==>首选项 ==>设置 ==>扩展 ==>cssrem.configuration ==>Root-font-size

相关文章

  • 2019-04-10响应式布局和自适应布局

    响应式布局和自适应布局详解 布局等于流动网格布局,而自适应布局等于使用固定分割点来进行布局。 自适应布局给了你更多...

  • 为iPhone 6设计自适应布局

    为iPhone 6设计自适应布局 为iPhone 6设计自适应布局

  • 常用网页布局

    一、多列布局 (1) 宽度自适应布局 两栏布局 左侧固定右侧自适应 右侧固定左侧自适应 技术原理(左侧固定右侧自适...

  • 常见网页布局的介绍

    左侧固定,右侧自适应 右侧固定,左侧自适应 圣杯布局(左右固定,中间自适应) 中间固定 两侧自适应 等分布局 等分...

  • 我还是要说的布局

    两栏布局 左边固定右边自适应 使用float布局 使用position布局    三栏布局 左右两边固定中间自适应...

  • Bootstrap 的日常使用

    十二栅格: 盒子的移动(不影响自适应布局): 元素的大小设置(不影响自适应布局):

  • 什么是响应式

    响应式 布局等于流动网格布局,而自适应布局等于使用固定分割点来进行布局。 自适应布局给了你更多设计的空间,因为你只...

  • 二栏布局一栏自适应和三栏布局中间自适应

    二栏布局一栏自适应 效果图: 三栏布局中间自适应 效果图:

  • 网页布局

    一、行布局 1.基础的行布局 2、行布局自适应 修改width为百分比: 3、行布局自适应限制最大宽 4、行布局垂...

  • css布局

    左边定宽,右边宽度自适应 等高自适应,两列布局

网友评论

      本文标题:自适应布局

      本文链接:https://www.haomeiwen.com/subject/rsxknrtx.html