先看没有适配前的效果,下面是没有适配前,使用的是px单位,代码和效果如下:
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>前端解决项目适配问题</title>
<style type="text/css">
.outside{
width: 1920px;
height: 100%;
}
.interior{
width: 300px;
height: 300px;
background: red;
}
</style>
</head>
<body>
<div class="outside">
<div class="interior"></div>
</div>
</body>
</html>
说明:px、rpx、em、rem当然还有其它单位,这些单位在我们开发过程中最常见的长度单位。首先去弄懂这几个长度单位的区别与用法,免得到时候有很多的兼容性问题。这里我简单说明下他们的区别:px像素是相对长度单位。像素px是相对于显示器屏幕分辨率而言的(引自CSS2.0手册)。rpx其实是微信对于rem的一种应用的规定,或者说一种设计的方案,官方上规定屏幕宽度为20rem,规定屏幕宽为750rpx。em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)。rem是相对于根元素<html>,也就是说,我们只需要在根元素确定一个参考值,其他子元素的值可以根据这个参考值来转换。具体这个参考值设置为多少,完全可以根据我们自己的需求来定。
说到这里,我们要进入我们的正题了,前端做适配的方式有很多种,比如使用框架bootstrap、百分比等,我们今天讲的是使用rem单位做适配。
首先第一步:引入flexible.js,它的作用是根据获取当前网页的宽度除以相应的数(默认是24),设置html的font-size,间接影响所有的rem。
第二步,把px换成rem,换算关系是根据flexible.js里面的第十七行var rem = docEl.clientWidth / 10决定的,docEl.clientWidth就是我们当前网页的宽度,也就是outside为1920,所以这就相当于1rem=1920/10=192px,这个时候就把网页有关使用px单位的都换成rem单位,它们之间的转换关系为1rem = 192px, 2rem = 384px(这个转换不固定的,是根据你当前网页的宽度和flexible.js里面的var rem = docEl.clientWidth / 10;除以多少为准,默认除以24)把px都按转换关系换成rem单位后,就完成了适配。
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>前端解决项目适配问题,适配后</title>
<style type="text/css">
.outside{
/* 1920除以10等于192(rem) 所以1rem = 192px*/
width: 192rem;
height: 100%;
}
.interior{
/* 第二步,把px换成rem
换算关系是根据flexible.js里面的第十七行var rem = docEl.clientWidth / 10决定的,
docEl.clientWidth就是我们当前网页的宽度,也就是outside为1920
所以这就相当于1rem=1920/10=192px,这个时候就把网页有关使用px单位的都换成rem单位,
它们之间的转换关系为1rem = 192px, 2rem = 384px(这个转换不固定的,是根据你当前网页的宽度和flexible.js里面的var rem = docEl.clientWidth / 10;除以多少为准,默认除以24)
把px都按转换关系换成rem单位后,就完成了适配,
*/
/* 300除以192等于1.56(rem) */
width: 1.56rem;
height: 1.56rem;
background: red;
}
</style>
</head>
<body>
<div class="outside">
<div class="interior"></div>
</div>
<!-- 第一步引入flexible -->
<script src="./flexible.js"></script>
</body>
</html>
注:是否引入flexible.js文件是关键,flexible.js下载地址,提取码:wdn1,按F12打开控制台,看html里面是否font-size属性,如下图所示:
原文地址:https://www.jb51.cc/wenti/3285013.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。