如何成为杰出的程序员，解决移动端适配方法总结，走进前端架构

1）viewport也是固定的

。

2）通过代码来控制rem基准值(设计稿以720px宽度量取实际尺寸)

3）css通过sass预编译，设置量取的px值转化rem的变量$px: (1/100)+rem;

-----------以下进行简要解释上面所用的放----------

• 百分比布局

百分比布局采用百分比设置元素宽高

• flex布局

父级元素设置display：flex

子级元素通过flex参数来设置缩放比例，缩放条件、排列方式等

缺点：具有兼容性问题

• rem布局

这里提供两种思路：

思路1

1）设置根节点字体大小为（为了方便，可以灵活设置：16、32、100等），布局时使用原px/@rem得出rem的值；

2）只需要在js中计算当前设备的clientwidth，然后用clientwidth/16（为font-size字体大小=1rem）–这里表示16rem为设备大小，即将设备看均分成1份

3）假设我们使用750px的设计稿，

举例：

(function () {

var styleNode = document.createElement(“style”);

/* 当不除以16时此时1em便占据视口宽度,

那么我们给其页面中的元素设置宽高基本都会小于1rem,浏览器的计算并不会特别精准容易出现偏差 */

// var w = document.documentElement.clientWidth;

/* 所以此时我们除以16,使得16rem便占据了满屏,对于页面中大多数元素的rem都会超过1rem */

var w = document.documentElement.clientWidth / 16;//获取视口大小

/* 设置此时根元素的fontsize，向html的style样式中添加font-size属性*/

styleNode.innerHTML = “html{font-size:” + w + “px!important}”;

//向head标签中添加style标签，其中包含html{font-size:w;}

document.head.appendChild(styleNode);

})()

在less文件中（这样省去了复杂的换算）

思路2：

1）设置根节点字体大小为100px(主要为了方便计算)，布局时使用原px/100得出rem值；

2）假设我们使用640px的设计稿(即iphone5，分辨率320x，dpr=2),只需要在js中计算当前设备的clientwidth,然后用100*(clientwidth/640)即可适配当前设备

代码：

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

• 用框架搭建页面

1–bootstrap（基于jQuery的响应式工具，适用于移动，pad、pc）

2.–ElementUI（PC），MintUI（移动端）、vue组件库开发等

• 媒体查询media（就是根据你需要的几台设备进行适配。代码如下：（注意注意！！！！以下只对你进行了媒体查询设置的设备有用）-------因此有改善的方法，可以继续往下看（即rem适配）

html{

font-size: 100px;

}

/* ip6 */

@media screen and (min-width:375px) {

html{/当屏幕尺寸大于375px时/

font-size: 117.1875px;

}

}

/* ip6p */

@media screen and (min-width:414px) {

html{

font-size: 129.375px;

}

}

/* ipad */

@media screen and (min-width:768px){

html{

font-size: 240px;

}

}

1）这里是以iphone5的屏幕分辨率_320_为基准，font-size设置成为100px，是为了好计算rem，因为在谷歌浏览器中字体大小是默认为16px，有着这样的运算1rem=16px，所以当你把字体大小设置成为100px的时候，此时，1rem=100px，那么在换算的时候会更加简单，只要将px除以100即可

2）那么如何通过iphone5的屏幕分辨率320以及大小100px来计算iphone6甚至ipad的字体大小呢？

3）我们知道iphone6的屏幕宽度尺寸是375，所以他对于的字体大小是（375_100）/320 ，即117.1875px。同理可以算出其他设备的大小。

这里涉及的关系：

当前设备字体/当前设备宽=设计稿字体/设计稿宽

因此：当前设备字体=当前设备宽_设计稿字体/设计稿宽，即**（375*100）/320**

实例介绍：

body设置：

iphone5

css设置：

width: 100%;

height: 1rem;

background-color: red;

font-size: 30px

再加上上面的设置，这里就不写了。

效果：在iphone5下：

在iphone6下：

可以看到div的高度有变化，变化成了117.19px，说明方法成立。

• 使用js进行rem适配（rem适配思路2补充）

代码：

(function (doc, win, undefined) {

var docEl = doc.documentElement,

resizeEvt = ‘orientationchange’ in win? ‘orientationchange’ : ‘resize’,

recalc = function () {

var clientWidth = docEl.clientWidth;

if (clientWidth === undefined) return;

//以ip5为基准

docEl.style.fontSize =(clientWidth*100) / 320 + ‘px’;

};

if (doc.addEventListener === undefined) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener(‘DOMContentLoaded’, recalc, false)

})(document, window);

我们单独来看这一段代码的意思：（这里是以320为基准，一般设计稿以750、680为基准，将320换成750或者680即可）

docEl.style.fontSize =(clientWidth*100) / 320+ ‘px’;

意思就是说你当前的屏幕尺寸去乘以100，这里的100也就相当于在修改默认字体的大小，变成了100px，（所以在换算成rem的时候，用你得到的px单位再除以100即可）再除以320，就是iPhone5的屏幕尺寸。

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

总结

=============================================================

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

a6e4.png)

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-RWPqDPsq-1712516298579)]