rem单位使用

囧囧图图
1,668 阅读5分钟

技术有限,总结一下他人,自己可以更好的理解

一, 前言: 几个单位对比 REM使用详解

  • px：相对长度单位,像素px是相对于显示器屏幕分辨率而言的

  • em：相对单位,继承父节点（层层继承,传递)基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值

  • rem：相对单位,相对长度单,r是'root'的缩写,相对于根元素的字体大小,相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持

  • vw、vh、vmin、vmax 使用的前提是在移动端的前提下,即首先申明个的缩放比例,相对于视口的高度和宽度,而不是父元素的(CSS百分比是相对于包含它的最近的父元素的高度和宽度)

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

1,vw：viewpoint width,视窗宽度,1vw等于视窗宽度的1%

2, vh：viewpoint height,视窗高度,1vh等于视窗高度的1%

3, vmin：vw和vh中较小的那个

4, vmax：vw和vh中较大的那个

vw、vh 优势: 在于能够直接获取高度,而用 % 在没有设置 body 高度的情况下,是无法正确获得可视区域的高度的

vmin、vmax 用处: 做移动页面开发时,如果使用 vw、wh 设置字体大小（比如 5vw）,在竖屏和横屏状态下显示的字体大小是不一样的,由于 vmin 和 vmax 是当前较小的, vw 和 vh 和当前较大的 vw 和 vh,这里就可以用到 vmin 和 vmax使得文字大小在横竖屏下保持一致

vw单位和百分比%单位对比 :100vw 和我们平时用的 width:100% 有什么区别呢？

百分比%是根据父元素宽度或者高度进行计算,而vw vh固定按照viewport来计算,不会受父元素宽高度影响, 100vw包括了页面滚动条宽度（页面滚动条属于viewport范围内,100vw当然包括了页面滚动条宽度）,但把body或者html设置为width:100%时,是不包括页面滚动条的宽度的,也就是说100vw在有纵向滚动条的情况下,会比100%宽, 那么就会引发一个问题：pc端使用vw单位时,如果页面内容超出一屏长度,出现了纵向滚动条,同时有元素width:100vw, 则会导致出现条横向滚动条,因为元素（100vw + 滚动条宽度）超出了viewport宽度,（移动端滚动条不占位,所以不会有这个问题）不过pc端一般不需要弹性布局,还是尽量使用width:100%更保险

问题: 怎么在不同分辨率的情况下计算根元素需要的font-size的值

法一: 网易手机端

px是css逻辑像素,与设备的物理像素是有区别的,如iPhone 6使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel,所以设备像素数为750 x 1334px,而它的CSS逻辑像素数为375 x 667px

<script>
    (function (doc, win, undefined) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth; // 屏幕宽度
                if (clientWidth === undefined) return;
                if (clientWidth < 750) { // 屏幕小于750,根元素(html)的font-size
                  docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                } else { // 如果页面的宽度750px以上,那么页面中html的font-size恒为100px
                  docEl.style.fontSize = '100px';
                }
             };
        if (doc.addEventListener === undefined) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false)
    })(document, window);
</script>

法二: 淘宝H5 (Flexible)

  • 设定： 页面不要设定,Flexible会自动设定每个屏幕宽度的根font-size、动态viewport、针对Retina屏做的dpr

  • 换算： 假设拿到的设计稿是750,Flexible会把设计稿分为10份,可以理解为页面width=10rem,即1rem=75px,所以根font-size（基准值）=75px,之后的css换算rem公式为：

  • rem并不适合用到段落文本上,所以在Flexible整个适配方案中,文本还是使用px作为单位

px / 75 = rem
所以100px = 100 / 75 = 1.33rem
50px = 50 / 75 = 0.66rem

我觉得有用的链接:

使用Flexible实现手淘H5页面的终端适配

移动端页面自适应解决方案—rem布局(进阶版)

二, 移动端meta标签设置

1, meta 标签分两大部分：HTTP 标题信息(http-equiv)和页面描述信息(name)

<meta charset="utf-8">

2, 设置浏览器的兼容模式（让IE使用最新的浏览器渲染)

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

3, name 属性的 viewport 值 (移动屏幕的缩放)

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

  • 作用：在移动浏览器中,当页面宽度超出设备,浏览器内部虚拟的一个页面容器,将页面容器缩放到设备那么大展示, 视口的宽度可以通过meta标签设置

  • width：视口的宽度,width=device-width：宽度是设备的宽度

  • initial-scale：初始化缩放,- initial-scale=1.0：不缩放

  • user-scalable：是否允许用户自行缩放,取值0或1,yes或no

  • minimum-scale：最小缩放,范围从0到10

  • maximum-scale：最大缩放,范围从0到10

  • 一般设置了不允许缩放,就没必要设置最大最小缩放了

4, 在web app应用下状态条(屏幕顶部条)的颜色,默认default(白色),可以定为black(黑色)和 black-translucent(灰色半透明)

<meta name="apple-mobile-web-app-status-bar-style" content="black">

5, 删除默认的苹果工具栏和菜单栏

<meta name="apple-mobile-web-app-capable" content="yes">

6, 禁止把数字转化为拨号链接

<meta name="format-detection" content="telephone=no">
avatar
文章
阅读
粉丝