移动端 rem 布局 解决方案

js 文件 

window.addEventListener("onorientationchange",setrem)

window.addEventListener("resize",setrem)

setrem()

function setrem(){

var html  = document.querySelector("html")

var width  = html.getBoundingClientRect().width

    html.style.fontSize = width/16+"px"

}

scss 文件 

@function rem($px){

@return  $px /46.875 +rem

}

css

调用rem

rem(px)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,054评论 0 2
  • H5-WebApp 自适应方案 - rem 对于WebApp来说,为了更通用地满足各机型屏幕的自适应布局要求,我们...
    nick2046阅读 8,529评论 4 35
  • 一、 在vue-cli中: 1. 在index.html中: 在common.scss中: 将common.s...
    zlf_j阅读 318评论 0 3
  • 方案一: 最新方案:(隆重推荐) 1、下载MateHandler.js,并引入页面2、head里加入 3、设置bo...
    晨光2016阅读 920评论 0 0
  • 让你烦恼的人,是来帮你的人; 让你痛苦的人,是来渡你的人; 让你怨恨的人,是你生命的贵人; 让你讨厌的人,恰恰是你...
    杂草丛里的向日葵阅读 149评论 0 0