先介绍一下这个近年来突起的黑马
CSS3中新增的属性，从IE9开始兼容，手机端都兼容。
参考的是<html>这个标签的font-size。rem中的r就是root根的意思。
所以rem要比em好用的多，因为em参考的是父亲的字号，和rem永远参考的是根元素（html标签）的字号。
rem被发明，实际上是为了做字号的变化方便一点。
中国的前端工程师，发现，rem不仅仅可以用来设置字号。还可以用来设置任何需要长度的地方。比如：
width、height、line-hight、background-size、border-width。
参考的是<html>这个标签的font-size。rem中的r就是root根的意思。
所以rem要比em好用的多，因为em参考的是父亲的字号，和rem永远参考的是根元素（html标签）的字号。
rem被发明，实际上是为了做字号的变化方便一点。
中国的前端工程师，发现，rem不仅仅可以用来设置字号。还可以用来设置任何需要长度的地方。比如：
width、height、line-hight、background-size、border-width。
用这个黑马是可以做不同分辨率的响应式布局的 当然移动端就不要考虑pc了 兼容到ipad就可以了
思路就是所有的单位都用rem来写 不管是div的宽高 还是a标签的字体大小
假设我们的移动端psd是按照640的标准来的 那么就设置 html{font-size:20px}
再去把div的宽度和高度由像素全部转变为rem 还有字体大小 也转换一下
这只是兼容了一个手机型号 或者说640的viewport的布局 那么更小的或者更大的怎么办呢 不要着急 有两种办法来解决 看你习惯了
第一种 media出场
html { font-size : 20px; } @media only screen and (min- 401px){ html { font-size: 25px !important; } } @media only screen and (min- 428px){ html { font-size: 26.75px !important; } } @media only screen and (min- 481px){ html { font-size: 30px !important; } } @media only screen and (min- 569px){ html { font-size: 35px !important; } } @media only screen and (min- 641px){ html { font-size: 40px !important; } }
第二种办法 来了
<script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); </script>
好了 大家赶紧去试试吧 如果有什么问题欢迎留言 新手总结 欢迎拍板 ---------------分享让每个人都可以成长--------------