前端移动端适配方案之rem之小白解惑

EasonTyler 发布于2019-08-29 15:07 / 2805人阅读

移动端适配-rem:

认识移动端

做适配方案之前先认识下移动端，熟悉移动端和pc端的区别和特点，才能真正理解做适配的精髓，这里就简单介绍下；

网上找不到主流android设备的数据表，就以iphone为例：

以iphone6为例：
竖屏宽为375，叫做逻辑像素（有的地方叫独立像素）；
竖屏宽的像素750，叫做物理像素，是设备实际的光点个数，要知道屏幕都是由一个一个光点组成的;
像素比（Asset）2x，就是2倍，物理像素/逻辑像素；
ppi:像素密度326,实际平方英寸的光点个数；值越高画面越细腻，但对cpu和电池等硬件要求就越高;ppi超过163的屏幕苹果公司起了个洋气的名字，叫视网膜屏；

逻辑像素和物理像素的概念需要消化消化，css中的px对应的实际上是逻辑像素，比如这里写个width:375px,是可以铺满横向的iphone6;

特别提醒，这里所有的有关像素的概念都和实际的尺寸（英寸）没有多大关系。（比如iphone6的375就比一些android的360看上去还要窄一些。）

pc端没有这么复杂的像素比关系，什么都是1:1:1；

搞明白这些像素的关系，问题就来了，怎么在css中写1个尺寸，就能让所有尺寸和像素比的设备都饱和展示，比如上面说的375px,屏幕横过来是不是就只占手机一半的位置，换个320宽的手机是不是就溢出了，有滚动条了；

认识单位rem

简单介绍下rem和px的换算关系：1rem=html的font-size；
比如：html{font-size:100px},那么1rem就等于100px;

方案就出来了，所有单位使用rem,我们动态改变html的font-size；

实施rem方案

思路就是(一遍看不清楚，把下面的例子理解了再看一遍思路)：先有一个基准，比如375的iphone6，（为什么拿375说事，上面已经提到，我们写的css样式实际上只和逻辑像素有关，至于手机用几个光点去渲染是它的事.）将html的font-size设置成容易计算的值比如100px，页面初始化和尺寸发生变化的时候获取屏幕的宽度（document.body.clientWidth）就好了，然后用这个值除以375，获得一个比值，去乘以100px,最后得到的值来替换html的font-size。

html的font-size=(屏幕宽/375)*100+"px";

例如iphone6,body:{width:3.75rem};
竖屏的时候:html{font-size:375/375}*100+"px",body宽就是3.75*(375/375)*100=375px，铺满了吧；
把屏幕横过来：html{font-size:667/375}*100+"px",body宽3.75*(667/375)*100=667px,又铺满了吧；

实力总结

目前移动端ui的设计稿都是按375的iphone6来设计的，大多是2倍图，是为了展现更细节的东西，就是750px宽的psd图，在前端设计适配方案的时候就可以用375对应100px的方式来做，所有尺寸css写psd上的一半就好；

rem的适配方案确定按以下几个步骤实施：
1.确定设计稿尺寸，375倍数还是320倍数；
2.在公共js中添加方法:

var doc=document.docementElement;//减少dom操作
resize(){
    //获取dom文档宽
    var clientWidth=doc.clientWidth,
        htmlFontSize=doc.style.fontSize;
        //动态改变html的font-size,以320为例
        if(clientWidth<320){//设置边界值以防万一
            htmlFontSize=‘100px’;
        }else(){
            htmlFontSize=clientWidth/320*100+"px";
        }
}
//检测屏幕尺寸变化同步font-size，如横竖屏切换时触发
window.onresize=function(){
    resize()
}；
//页面初始化时触发
resize()

3.css中所有的样式单位为rem，包括文字的大小，换算关系如下：
如：设计稿尺寸为640，font-size为20px，那么所有尺寸除以2，
{width:3.2rem;font-size:0.1rem;}
如：设计稿尺寸为320，font-size为20px，那么body{width:3.2rem;font-size:0.2rem;}
如：设计搞为375,那么resize()方法中的320要换成375,css写成body{width:3.75rem;font-size:0.2rem}

特别提醒：这样的适配在pad横屏展示超级大，所以还是要根据业务需求设置临界值；
移动端图片适配除了rem的尺寸还要根据不同尺寸设备更换2倍图和3倍图，比如pad上展示3倍图就会更清晰，一般方案是用media媒体查询更换背景图；

rem的缺陷
最近在做开发的时候遇到rem的一个大坑，就是如果用户改变了手机的字体大小，而且我们的页面样式的宽用了rem,比如{width:1rem},那么页面的宽就会成倍增长，导致页面乱掉。。。还没找到办法解决，宽度还是先避免使用rem的好。

云服务器 GPU云服务器移动端适配方案移动端适配 kettle之数据同步方案移动端适配 js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113110.html

前端移动端适配方案之rem之小白解惑

移动端适配-rem: 认识移动端做适配方案之前先认识下移动端，熟悉移动端和pc端的区别和特点，才能真正理解做适配的精髓，这里就简单介绍下；网上找不到主流android设备的数据表，就以iphone为例：showImg(https://segmentfault.com/img/bV8ZZH?w=857&h=434); 以iphone6为例：竖屏宽为375，叫做逻辑像素（有的地方叫独立像素）；竖屏...

W_BinaryTree 2019-08-22 16:33 评论0 收藏0
前端移动端适配方案之rem之小白解惑

移动端适配-rem: 认识移动端做适配方案之前先认识下移动端，熟悉移动端和pc端的区别和特点，才能真正理解做适配的精髓，这里就简单介绍下；网上找不到主流android设备的数据表，就以iphone为例：showImg(https://segmentfault.com/img/bV8ZZH?w=857&h=434); 以iphone6为例：竖屏宽为375，叫做逻辑像素（有的地方叫独立像素）；竖屏...

Lemon_95 2019-08-02 10:16 评论0 收藏0
从零搭建移动H5开发项目实战

摘要：并且除了常用的端，还要考虑微信端，或者是端。所以我们要有一套机制，在端上走的代码，在端或者微信端上走端对应的代码。对于一个从零开始的移动端项目，我总结了以上这些移动开发难点，希望之后的人能少踩点坑，站在我的肩膀上提高项目开发的效率和质量。从零搭建移动H5开发项目实战前端H5的前世今身在Pc的时代，前端技术无疑统治了大多数用户的交互界面！而在移动为王的今天，NA开发在早期占领了大多...

terro 2019-08-29 11:32 评论0 收藏0