移动端布局使用哪种单位比较好？

首页 > 代码库 > 移动端布局使用哪种单位比较好？

移动端布局使用哪种单位比较好？

2024-08-21 01:05:51 220人阅读

关于移动端布局使用哪种单位，每个人都有自己习惯使用的单位，这个也只是我个人的一点点浅见。

欢迎大家指点。

很多人在谈到写移动端页面的时候，都觉得很恼火。因为要写n套css样式。然后用媒体查询做适配。

一般这个时候我都表示自己懵懵哒，搞不懂为什么要写这么多套。可能是由于我经验不够，所以看不出来写这么多套有什么深意。

我认为在移动端可以做到适配不同的手机分辨率，如果只是保持整体缩放，没有设计上的差异可以不需要用到`media query`。

下面说说我习惯使用的单位：em，rem，%

1.em

em是一个相对值，而且是一个相对于父元素的值，因此在使用em时，需要清楚父元素的font-size是多少。

em计算公式如下：

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

我第一次使用em的时候，由于不清楚它是相对父元素的值，写出来的页面真是萌萌哒。

在使用em时，我用js做了一些适配。

不同手机的浏览器默认分辩率是不一样的，所以需要计算浏览器实际屏幕宽度与设计图宽度的比例，然后根据该比例计算body的font-size。

只需要写一套css样式，在不同尺寸的屏幕上显示出来都是合适的。

sw是设计图宽度，假设按照Iphone 6设计的高清设计图，设计图的宽度为750；

var w = $(window);
function auto() {
　　var sw = 750;
　　var auto1 = (parseInt(w.width()) / sw);
　　var auto3 = auto1 * 62.5 + "%";
　　$("body").css("font-size", auto3);
};

注意：使用em时，一定要注意其父级元素的font-size的大小！

重要的事情说三遍：em是相对于父级的！em是相对于父级的！em是相对于父级的！！

2.rem

rem是相对于根元素<html>的值，我们只需要在根元素设置一个固定的值，然后计算比例写相应的rem就可以啦。非常简单。

下面来看一个简单代码实例：

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

我在根元素<html>中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准）。从上面的计算结果，我们使用“rem”就像使用“px”一样的方便，而且同时解决了“px”和“em”两者不同之处。

在了解了rem这个单位后，我们可以针对这个单位的特性进行移动端布局。

①设置页面rem的大小

html {font-size: calc(100vw/3.75)}

100vw是设备的宽度，除以3.75可以让1rem的大小在iPhone6下等于100px。

②换算单位

在布局时，直接换算，将‘px‘替换为‘rem‘。加入在设计图上10px，就可以携程0.1rem。这样，在IPhone 6下，所有元素的尺寸还是和视觉稿的尺寸一样，而在别的手持设备上，100vw/3.75的值会随着手持设备的宽度变化呈正比例变化。

这样就可以做到针对任何分辨率的设备保持视觉一致了。

③vw单位兼容性

低版本的手持设备可能不支持vw单位，需要使用js处理。

document.documentElement.style.fontSize = window.innerWidth/3.75+‘px‘