移动端布局单位介绍之rem(代码片段)

关键词：

本文主要写给刚接触移动端开发的同鞋们。

首先先将几个主要概念讲一下；

什么是移动端？

移动端故名思义是为移动终端，大名叫移动通信终端，是指可以在移动中使用的计算机设备。其实就是我们常说的手机。

什么是布局？

前端开发中布局是将主要的html结构布置好。

rem是什么？

rem是一种长度单位，是而且仅是根据根元素html改变的长度单位。

Root em（REM）是CSS3中新定义的一种长度单位。和之前的em(根据父元素改变大小)单位相比在使用上具有明显的优势。著名的响应式web框架Fundation就是用REMs作为基本的长度单位。

接下来还有几个重要的概念需要交代一下；

什么是像素？

中文全称为图像元素。像素仅仅只是分辨率的尺寸单位，而不是画质。　　

定义：是指在由一个数字序列表示的图像中的一个最小单位，称为像素。

物理像素：一个物理像素是显示器(手机屏幕)上最小的物理显示单位，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。

设备独立像素：设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。

设备像素比： 设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系，设备像素比 = 物理像素 / 设备独立像素；

在javascript中，可以通过window.devicePixelRatio获取到当前设备的dpr。

在css中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。

如果设备宽高是375X667 DPR为2的话，其物理像素就要相应的乘以2，也就是为750X1334；

这时候如果你设置的css像素为1px，那么在此设备上显示的就为2px。（这就是经典的移动端一像素问题，下面有解决方案）这对于布局来说会造成问题。所以我们要将它统一起来。这个统一也必须是动态的。那么我们怎么去动态改变呢？

答案是通过视口设置宽高缩放。

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

当然这是静态设置的，一旦换个DPR不同的设备就又会造成多1像素的问题。那么我们要怎么设置不同DPR的不同缩放比呢。

我们目标是，DPR为2的时候，initial-scale=0.5 ,DPR为3的时候，initial-scale=0.33333333。

相信大家都知道javascript，通过javascript我们可以动态的设置初始缩放。

首先我们要获取dpr，在javascript中是通过： window.devicePixelRatio;来获取的。那么我就开始动态设置吧。

移动端1px解决方法：

<script>
/* 此脚本写在html的head标签中 */
var pixel = 1/window.devicePixelRatio;
document.write(‘<meta name="viewport" content="width=device-width,initial-scale=‘+pixel+‘,‘+‘minimum-scale=‘+pixel+‘,‘+‘maximum-scale=‘+pixel+‘">‘)
</script>

ok，到这我们就解决了1px的问题。

接下来我们就要解决布局单位的问题了；

首先我们知道布局单位有很多：

px：用这个布局的话，写出来的大小只能和设计稿上的一样了。一旦换个终端就GG了。所以这种单位不用考虑了。

%；百分比布局还是可以使用的，但如果是高度不确定的话就不适合了。

em：相对于父级，是个相对元素，一旦你要设置字体大小而又宽高不能统一，麻烦就来了。

rem:也是个相对元素，不过它只相对于根元素也就是html，用这个作为布局单位能做到适配各种终端，当然前提是动态改变了根元素的font-size.

所以如果你要做的适配大部分的手机终端，那么rem是个布局的好单位。前提是动态设置了html的font-size大小。让他随设备的改变而改变.

那我们要怎么动态改变呢，首先我们要获取当前设备的宽度，用它去除以一个常数，这样我们设置出来的font大小就是相对来说不变的。

获取宽度可以通过javascript：getBoundingClientRect().width;

<script type="text/javascript">
    var html = document.querySelector(‘html‘);
    var width = html.getBoundingClientRect().width;
    html.style.fontSize = width/16 + ‘px‘;
</script>

进行布局的话建议用less去写，因为less中可以用变量，这样我们可以省去频繁用计算器的时间了。

移动web开发之rem适配布局(代码片段)

引入1.页面布局文字能否随着屏幕大小变化而变化2.流式布局和flex布局主要针对宽度布局，那高度如何设置3.怎样让屏幕发生变化的时候元素高度和宽度等比例缩放1.rem基础rem单位rem(rootem)是一个相对单位，类似于em，em... 查看详情

calc计算，移动端布局(代码片段)

在做移动端页面布局的时候，需要做到响应式，也就是文字会随着页面的大小改变以后文字的大小和div的宽高等比例跟着改变。rem单位是相对于html的font-size的来的，所以用rem单位就可以实现。我们只要把HTML的font-size设置自适应... 查看详情

如何利用vw+rem进行移动端布局(代码片段)

根据CSS3规范,视口单位主要包括以下4个:vw:1vw等于视口宽度的1%vh:1vh等于视口高度的1%vmin:选取vw和vh中最小的那个vmax:选取vw和vh中最大的那个用视口单位度量，视口宽度为100vw，高度为100vh（左侧为竖屏情况，右侧为横屏情况）例如... 查看详情

移动端布局之路-----rem布局(代码片段)

 rem基础rem单位rem(rootem)是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如，根元素（html）设置font-size=12px;非根元素设置width:2rem;则换成px表示就是24px。/*根html为12px*/htmlfont... 查看详情

rem与移动端布局

　　移动端布局痛点在：兼容各个分辨率的移动设备，同样是手机，iPhone4-iPhoneX分辨率范围就已经很广；如果使用px进行布局，显然会出现问题；　　常见的像素单位px,em,rem中，em是相对于父元素font-size的单位，个人认为在使用... 查看详情

移动端web开发流式布局flex布局rem布局(代码片段)

文章目录移动端Web开发流式布局flex布局布局原理常用属性rem布局rem基础媒体查询less移动端Web开发流式布局在PC端进行网页制作时，经常使用固定像素的网页布局，但这种布局方式对小屏幕的设备不友好。为了适应小屏幕... 查看详情

移动端布局1：媒体查询结合rem实现移动端布局(代码片段)

第一步：先写好重置的样式。直接复制粘贴即可@mediaalland(max-width:320px) html font-size:12px; @mediaalland(min-width:321px)and(max-width:375px) html font-size:14px; @mediaalland(min-width:376px) html 查看详情

移动端页面rem布局的关键点。(代码片段)

移动端页面布局的关键点。第一.rem布局：1，必须写<metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><metahttp-equiv="X 查看详情

手机端页面自适应解决方案—rem布局(代码片段)

相信很多刚开始写移动端页面的同学都要面对页面自适应的问题，当然解决方案很多，比如：百分比布局，弹性布局flex（什么是flex），也都能获得不错的效果，这里主要介绍的是本人在实践中用的最顺手最简单的布局方案—... 查看详情

移动端单位rem

rem是指相对于根元素的字体大小的单位(相对单位)rem和em的区别，em相对于父元素的字体大小的单位。rem相对于根元素html字体大小计算，　　　　　　　　px是一个绝对的单位。所以rem可以实现强大的屏幕适配布局例如：html{font-si... 查看详情

移动端适配之rem(代码片段)

<script>functionsetSize()vara=document.documentElement?document.documentElement.clientWidth:document.body.clientWidth;if(a>750)a=750;document.documentElement.style.fontSize=a*1/16+"px";_ht 查看详情

移动端单位介绍(代码片段)

 前言在页面整体布局中，页面元素的尺寸大小（长度、宽度、内外边距等）和页面字体的大小也是重要的工作之一。一个合理设置，则会让页面看起来层次分明，重点鲜明，赏心悦目。反之，一个不友好的页面尺寸和字体大... 查看详情

细说移动端经典的rem布局与新秀vw布局(代码片段)

和以往一样，本次项目也放到了Github中，欢迎围观star~ 1.前言2.基本概念3.REM布局4.VW布局　实现单边边框1px　实现多边边框1px  实现边框圆角　实现容器固定纵横比5.REM+VW布局6.对比选择  方案选择  食用... 查看详情

移动端rem的用法

标签：1.rem（fontsizeoftherootelement）是指相对于根元素的字体大小的单位，em（fontsizeoftheelement）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。二者都是相... 查看详情

移动端适配rem(代码片段)

.../2即可。如果是小程序，不需要除以2。htmlfont-size:26.66vw;//移动端适配这里使用rem+vw方案省去媒体查询第二种：媒体查询按照750设计稿，根元素是100px，兼容性比较好。htmlfont-size:625%;/*100÷16×100%=625%*/@mediascreenan 查看详情

02-移动端单位介绍(代码片段)

前言在页面整体布局中，页面元素的尺寸大小（长度、宽度、内外边距等）和页面字体的大小也是重要的工作之一。一个合理设置，则会让页面看起来层次分明，重点鲜明，赏心悦目。反之，一个不友好的页面尺寸和字体大小设... 查看详情

最优适配布局(代码片段)

移动端的响应式布局需要通过设置mediaqueries配置多个断点，在响应断点切换的瞬间带来断层式的切换变化，用户体验不佳。而采用rem单位的弹性布局，又需要脚本依赖（头部内嵌：监听分辨率变换，根元素字体随之变换的脚本）... 查看详情

前端移动端开发之rem(代码片段)

...言作为一名前端工程师，我们不仅要会PC端开发，还要会移动端开发，而且现在移动端占据主要流量，所以掌握移动端开发的技能更是必须的。 那么进行移动端的开发，什么是必须，我们想要的效果是什么？自适应。对，我... 查看详情