首页 / JAVASCRIPT / rem绝对自适应方案解析
rem绝对自适应方案解析
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了rem绝对自适应方案解析，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2302字，纯文字阅读大概需要4分钟。
内容图文
rem
css3新增的rem是现在非常受欢迎的单位。看一下MDN上的说明：
这个单位代表根元素的
font-size大小（例如<html>元素的font-size）。
使用这个单位可以创建完美的可扩展布局，只需根据页面大小去修改html的font-size，就能达到适配整个页面的目的。那么问题来了，如何使html的font-size自适应呢？
媒体查询
media的用法这里就不赘述，简单说明通过媒体查询修改html的font-size以达到页面自适应的目的。
html如下：
<article class="container">
<ol>
<li>rem是相对于root元素(html)字体大小的一个单位。 eg:html默认font-size为16px 则1rem = 16px</li>
<li>若元素以rem为单位去设置字体、宽高、边距等。则修改html字体大小就能达到所有元素一起等比例修改的效果</li>
<li>所以要实现html字体在不同页面大小下自适应</li>
</ol>
</article>css如下：
//媒体查询控制html字体大小
@media (max-width:767px) {
html{
font-size: 14px;
}
}
@media (min-width:768px) {
html{
font-size: 16px;
}
}
@media (min-width:992px) {
html{
font-size: 20px;
}
}
//页面元素的简单样式
.container{
padding: 1rem;
}
li{
font-size: 1rem;
}通过媒体查询，在不同大小区间的页面上，设置html的font-size都不一样；
页面宽度为700px时，html的字体大小为14px，此时 1rem = 14px ，li元素的字体大小就是14px，包裹的内边距也是14px；改变页面宽度为800px，html的字体大小为16px，此时 1rem = 16px ，li元素的字体大小变为16px，包裹的内边距也变为16px；
这种方式当然媒体查询划分的越细致，自适应越强，但是无法实现完全自适应，只是区间性的。
vw
vw代表的视口的 1/100 100vw代表的即是视口的宽度。使用它我们就可以实现html的font-size完全自适应了。
css如下：
html{
font-size: calc(16/768*100vw); //以768时16px为标准进行缩放
}例子的768px为一个假设的标准值，一般设计稿的大小为标准，然后再进行适配。调节页面大小，可以完全自适应。
JS调整
加载页面和调整窗口大小的时，设置html的字体大小，已达到自适应的目的。
(function(){
var doc = document.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
function changeFontSize(){
var clietWidth = doc.offsetWidth,
scale = clietWidth/768; //以768为标准
doc.style.fontSize = scale * 16 + 'px'; }
if (!doc.addEventListener) return;
window.addEventListener(resizeEvt,changeFontSize) //窗口大小变化或者手机横屏
document.addEventListener('DOMContentLoaded',changeFontSize) //加载页面触发
})()1、获取视口宽度
2、以视口宽度对标准的变化，设置html的font-size
以上就是rem绝对自适应方案解析的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的rem绝对自适应方案解析全部内容，希望文章能够帮你解决rem绝对自适应方案解析所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。