rem绝对自适应方案
2018-06-24 01:56:09来源:未知 阅读 ()
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
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 两个div并排,右边div固定宽度,左边宽度自适应 2020-06-03
- 两个div并排,左边div固定宽度,右边宽度自适应 2020-06-03
- 移动端适配-动态计算rem 2020-03-17
- 移动端分辨率+小程序的自适应单位RPX 2020-03-16
- 移动端常用单位(%和rem) 2020-03-14
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash