前端移动端开发之rem

前言

作为一名前端工程师,我们不仅要会PC端开发,还要会移动端开发,而且现在移动端占据主要流量,所以掌握移动端开发的技能更是必须的。

那么进行移动端的开发,什么是必须,我们想要的效果是什么?

自适应。对,我们想要的效果应该是网页上的元素能随着窗口大小的变化而跟着同比的变化。

假如我们拿到一张750px宽的设计图,上面有一个元素是75px宽,当这张页面出现在只有540px宽的设备上,这个元素就得是54px宽。

如果你使用px这种固定的长度单位,在不同大小的设备上会出现什么情况,不用我说你也知道吧。

现在手机机型五花八门,主流手机iPhone6/7/8 4.7英寸、iPhone6/7/8 Plus 5.5英寸、iPhoneX 5.8英寸等。

那么如何让这些机型不同大小不一致的手机呈现出我们想要的效果呢?

方案

解决移动端适配问题其实有多种方案。

1.百分比

很容易就能想到百分比能实现自适应,但百分比非常局限。

在一张网页上,有一个元素占这个网页宽度的一半,你很容易就想到width: 50%。

但这个元素如果出现在不知道距页面左边缘多少px的情况下,你一下子无法看出占多少百分比,这时候你就得去测量、去算占比,如果元素非常多的话,那就相当麻烦了。

然而,使用百分比真正的弊端在于字体大小和元素高度。

字体大小是无法通过百分比实现自适应的。

元素的高度也是一样,一般移动端的页面是不知道高度的,可以随着内容无限下拉,元素的高度很难通过百分比去计算。

2.媒体查询(@media)

使用多套CSS也可以实现移动端自适应。

但媒体查询最适合的场景是一个网页在PC端是一种呈现形式,在移动端是另一种呈现形式。

如果纯移动端网页(只考虑移动设备不考虑PC设备)使用媒体查询,面对不同机型,就会有多套CSS,代码相当冗长。

3.vw

vw是一种CSS长度单位,是相对单位。

表示相对视口宽度(Viewport Width),1vw = 1% * 视口宽度,100vw等于屏幕宽度。

它的自适应效果非常好,但是目前它的兼容性不好,特别是在移动端浏览器有很多兼容问题的环境下,这里显得特别不合适,所以不推荐。

4.rem

rem也是一种CSS长度单位,也是相对单位。

它相对于根元素(<html>)下的font-size的值,1rem = html下font-size的值。

这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

目前,除了IE8及更早版本外,所有浏览器均已支持rem。

viewport

在真正使用之前,我必须介绍一下<meta name="viewport">这个元素标签。

想必,在每一个移动端页面,都有这么一段代码:

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

这段代码的意思是让视口(viewport)的宽度等于设备的宽度,初始缩放比例为1,最小缩放比例为1,最大缩放比例为1,禁止用户缩放。content的内容是可以配置的。

移动端浏览器会把网页放在一个viewport中,

默认情况下,移动设备上的viewport是大于浏览器可视区域的,

所以一般会出现滚动条,这是为了能在移动设备上正常显示那些为PC端设计的网站,移动设备上的浏览器都会把自己默认的viewport设为980px或其他值。

像下面这样,在还没有写<meta>的情形,模拟手机浏览器:

所以我们必须使用<meta>元素来限制viewport的大小和缩放,一般我们都是等于设备的宽度。

必须使用<meta>元素还有一点是和rem相关的。

上面说过,rem是一种相对单位,相对于html元素下的font-size的值。

如果html元素下的font-size的值能随着页面的大小变化而变化,那么rem也能做出相应的变化。

所以,如果没有加上<meta>元素标签这一段代码,在不同机型大小下,html元素下的font-size的值是一直不变的,因为viewport不变,一直保持980px。

使用

“假如我们拿到一张750px宽的设计图,上面有一个元素是75px宽,当这张页面出现在只有540px宽的设备上,这个元素就得是54px宽。”

我们说过达到这种移动端自适应的效果最好的方法是使用rem单位。

因为1rem = html下font-size的值,如果html下font-size的值能随着页面的大小改变而改变,我们在代码写的rem就不用改变。

先约定1rem = 50px,如750px页面,75px元素,那么元素的width我们在代码中设置的值就是1.5rem。当页面大小变成540px,1rem = 36px,代码中元素的宽度是1.5rem,所以元素现在在页面的宽度是54px。

好,现在我们就写一段代码来让html下font-size的值能随着页面的大小改变而改变,代码如下:

(function(doc, win){
    var docEl = doc.documentElement,
        resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 50 * (clientWidth / 750) + ‘px‘;
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener(‘DOMContentLoaded‘, recalc, false);
})(document, window);

实例

假设我们的设计师给我们一张设计图(嗯,没错!就长这个样子)

这是一张 750*1334 px的设计图,在设计图上量得这个黄色的矩形的长是330px,宽是190px。

因为一般设计图都是按照iPhone6的二倍图进行设计,所以iPhone6的实际尺寸是 375*667 px,所以黄色矩形的长应是165px,宽是95px,

而且PC端浏览器调试手机模式下iPhone6的尺寸也是 375*667 px。

我们约定1rem = 50px,所以黄色矩形 width: 3.3rem; height: 1.9rem;

我们的设置html下font-size的值的js代码为

// 50是1rem等价于多少px,375是设计稿的宽度,这里我们除以了2
docEl.style.fontSize = 50 * (clientWidth / 375) + ‘px‘;

效果:

源码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>rem</title>
    <style>
        div {
            width: 3.3rem;
            height: 1.9rem;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        (function(doc, win){
            var docEl = doc.documentElement,
                resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    docEl.style.fontSize = 50 * (clientWidth / 375) + ‘px‘;
                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener(‘DOMContentLoaded‘, recalc, false);
        })(document, window);
    </script>
</body>
</html>

额外概念 

在为写这篇博客上网查资料的过程中,总结了几个与移动端开发相关的概念。

1.物理像素physical pixel

一个物理像素是显示器上最小的物理显示单位。

2.设备独立像素(也叫密度无关像素、css像素、逻辑像素)

device independent pixels(dips)

一种物理测量单位,基于计算机控制的坐标系统和抽象像素(虚拟像素),由底层系统的程序使用,转换为物理像素的应用。

3.设备像素比device pixel ratio(dpr) 

定义了物理像素和设备独立像素的对应关系。

公式:设备像素比 = 物理像素 / 设备独立像素 (该值也是平时手机说的几倍屏几倍屏的值)

4.分辨率

比如图片是由1280个像素* 720个像素组成。

5.PPI(每英寸所拥有的像素)

PPI是用来描述屏幕的像素显示密度。

6.DPI(每英寸打印的点数)

DPI表示每英寸打印的点数。

原文地址:https://www.cnblogs.com/linxian95/p/9756187.html

时间: 2024-11-11 18:38:19

前端移动端开发之rem的相关文章

移动端开发之px,em和rem详解

px:表示的是绝对的像素值,1px就是1像素大小 em:关于em,网上有资料说是关于父元素的,但是其实个人感觉这种说法是不对的,其实em的大小是根据自身的font-size确定的,而只是正常的情况下子元素继承了父元素的font-size rem:是指根元素的大小,比如跟元素大小是16px(浏览器默认font-size),那么1rem的大小就是16px 举个例子: 我们先来写一段代码: <div class='div1'> <div class='div2'></div>

移动开发之rem布局

rem基础 rem单位 rem (root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素(html)设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px. /* 根html 为 12px */ html { font-size: 12px; } /* 此时 div 的字体大小就是 24px */ div { font-size: 2rem; } rem的优势:父元素文字大

移动web开发之rem的使用

为什么要使用rem 移动端设备尺寸五花八门,单纯使用px这个单位无法轻易适配,rem就可以为我们解决这个问题! 如何使用rem 1rem默认等于16px,这是因为页面的默认字体大小就是16px.r 代表rootelement,因此只要修改html的font-size大小,就可以更改1rem的大小! 叮嘱UI设计师 移动端的设计稿尺寸要做成640*750的!移动端的设计稿尺寸要做成640*750的!移动端的设计稿尺寸要做成640*750的!重要的事情说三遍!(640固定,高度可变) 当拿到图后 一

web app开发之rem

CSS3新增了一个相对单位rem,官方的解释为“font size of the root element”,相对于根元素(html)的font size. rem,em,px单位的区别: rem单位和em单位都是相对大小,px是绝对大小.其区别在 1.em基于当前元素的(如果没设置就是继承其父元素的)font-size,这样会出现一些组合问题: 2.rem则是只相对于根元素的font-size,即只需要设置根元素的font-size,其它元素使用rem单位设置成相应的百分比即可 默认没有对根元

移动端开发之APP消息推送

有这样一种场景,当你在手机APP上输入你的信息,会自动跳出一个弹窗,表示某任务已执行.最简单的一个例子就是当你输入手机号,点击获取验证码的时候,就会跳出一个对话框,说"验证码已发送到手机,请注意查收",这些都是如何实现的. 就以我参与开发的一款移动报表FineReport为例,讲解一下如何开发手动推送APP消息. 这个APP里有这样一个应用,它是可以实现在客户端填报录入数据,然后数据上传到数据库中的这样一个功能,也就是所谓的移动化办公,这在企业办公方面用得比较多.当数据录入系统成功后,

移动平台前端开发之WebApp代码技巧

1.首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> <meta content="yes" name="apple-mobile-web

高效Web前端开发之路:YUI 3.15 PDF扫描版

JavaScript是一种最初由Netscape的LiveScript发展而来的面向对象的Web脚本语言,被ECMA国际定义为国际化标准--ECMAScript.JavaScript具有使用局限性.在Web方面,其必须与各种DOM技术结合才能发挥作用.因此,一些具有开拓创新精神的开发者们便开发出了各种丰富的第三方框架,通过第三方的支持代码实现浏览器兼容性的统一.代码的简化以及功能的增强. <高效Web前端开发之路:YUI 3.15>作者便是在此背景下,以国外最优秀的JavaScript框架之一

前端开发之html基础知识02

经典表格:表格没有列的概念,只有行的概念, 一行 tr,行中的单元格 td表头的突出显示:tr>th <table width="400px" align="center" border="1px" cellspacing="0" cellpadding="5px" > <!-- align = "center" 表格整体剧中--> <caption&

前端开发之CSS基础知识02

重要: 行内元素中只能容纳文本或其他的行内元素 a标签例外 文字类型的块标签,不要放其他块元素 如 P H1 CSS规范: .demo {} 空格 font-size: 12px; 空格 .a1, .a2, .a3 {} 空格 后代选择器或子代选择器最好不要超过三层 文字分为 顶线 中线 基线 底线 CSS特性: 层叠行:若冲突,按照最后的为准 CSS权重(重要): 标签 0.0.0.1 类选择器 0.0.1.0 id选择器 0.1.0.0 内联样式 1.0.0.0 !important 无穷大