一, 关于 CSS 中的单位
大家都知道在 css 中的单位, 一般都包括有 px,%,em 等单位, 另外 css3 新增加一个单位 rem.
其中 px,% 等单位平时在传统布局当中使用的比较频繁, 大家也比较熟悉, 不过 px 单位在进行自适应布局的过程当中则会有些力不从心, 大部分的解决方案是使用 % 为单位配合 @media 媒介查询来进行自适应布局.
不过还有另外一个 css3 新添加的单位也同样可以拿来进行自适应布局, 在我看来这种方法也更加方便直观.
1,em 和 rem
首先先介绍一下 em, 这个单位是根据其父元素的字体大小来进行计算的, 即 1em 为其父元素的字体大小, 例如父元素的字体大小为 12px 则其子元素的 1em 为 12px,2em 则为 24px. 但是因为其只能针对父元素来进行计算, 使用起来因为涉及到大量的运算, 很不方便, 因此平时使用不是很多.
css3 针对这种情况在 css3 的规范下推出了一个新的单位 rem,rem 的使用方式和 em 类似, 只不过 em 是基于其父元素的字体大小来进行计算, 而 rem 则是针对根元素即 html 这个标签的字体大小来进行计算, 在这种情况下假如 html 的字体大小为 12px, 则在页面中左右元素的 1 个 rem 即为 12px,2rem 为 24px.
2, 用 rem 进行自适应布局: 简单的自动适配所有屏幕
使用 rem 进行自适应布局的关键就是给 html 赋值一个动态的 font-size, 在这里我们可以在页面 dom 加载完毕之后使用 js 获取到页面宽度 (高度也可以), 然后将其除以一个固定的定量, 比如 20, 然后将结果赋给 html 的 font-size, 这样我们就得到了一个会根据页面宽度的变化而不断变化的值, 这个值即是 1rem. 代码如下:
- // 页面大小出现变化的时候再次获取新的 font-size 值
- $(window).resize(function(){
- setHtmlFontSize(20);
- }) // 初始化执行 setHtmlFontSize(20);
- // 动态设置 html 元素的 font-size 的方法
- function setHtmlFontSize(num){
- // 页面的宽度, 其中 17 为页面默认的导航条的宽度
- var _w=document.documentElement.clientWidth-17;
- $('html').css('fontSize',_w/num);
- }
举个例子, 我们先用 js 获取页面的宽度, 除以 20 进行计算之后, 把这个值赋给 html 的 font-size, 得到一个根据页面宽度变化而变化的单位 1rem, 这个时候假如我们拿到的设计稿的宽度是 640px, 将其除以 20, 这样我们就得到在页面宽度为 640px 的情况下 1rem 即为 32px, 如果设计稿中的 banner 图部分的宽度是 320px, 而高度则是 160px, 这个部分需要进行自适应, 那么我们就可以给这个 banner 图宽度为 320/32=10rem, 而高度为 160/32=5rem. 这样赋值之后假如页面的宽度就是 640px, 那 banner 的尺寸为 320px160px, 宽度是屏幕尺寸的一半, 高度为 1/4, 这个时候假如屏幕变宽为 1280px, 那这个时候页面中 1rem 所代表的尺寸就变成了 1280/20=64px,banner 的尺寸变成了相应的 640px320px, 宽度依然是屏幕尺寸的一半, 高度为 1/4. 这样就非常简单的实现了自适应的布局赋值.
通过这种动态的设定 html 的 font-size 的值之后, 我们可以很轻易的给页面上任何地方, 例如 padding,width,height,margin 设置大小, 并且这个大小都是自适应的.
二, 关于 calc()
在进行自适应布局的时候有时候会碰到需要有给固定宽高的地方, 比如一个 div 宽度为屏幕尺寸的一半, 但是有 10px 的 padding, 那在这种情况下假如我们直接给宽度 50%, 或者计算完之后的 rem 单位, 再给 padding, 因为盒模型的关系导致其宽度为 50% 20px. 但是又因为 50% 是一个不固定的值, 导致很难计算出一个具体的值, 在这种情况下我们就可以使用 css3 中的一个计算方法: calc(), 可以设置
- div{
- width:calc(50% - 20px);
- }
这样设置之后得到的结果就是计算之后的结果, 任何需要给具体的值的地方都可以使用 calc 来进行计算, 不过需要注意目前此方法只能进行 + - */ 的四则运算, 并且在计算符号前后都需要有一个空格. 当然上面的 50% 也可以换成计算之后的 rem 单位.
注意点: calc 内部的表达式, 在使用运算符号时, 两遍必须加上空格 (虽然乘除可以无视, 但还是建议带上), 不然会解析错误.
总结:
使用 rem 单位以及 calc() 方法在进行自适应布局非常强大, 可以配合媒介查询, 可以非常灵活的控制各种元素的自适应.
来源: http://www.bubuko.com/infodetail-2699014.html