css3中单位rem与.less结合布局

rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。

通常的,我们把html的font-size设置成0.625%;因为浏览器默认的字体大小是16px,所以font-size:0.625也就相当于16px*0.625=10px;往后我们要设置字体大小的时候,就可以用rem了.
例如font-size:1.2rem; 就相当于 font-size:12px;了
但可能有一些浏览器的默认字体不是16px.所以我们可以直接把html的font-size设置成10px;就可以确保万无一失.
然后还有个问题,谷歌浏览器的最小文字大小为12px;假如把rem用到宽高,行高,边距的时候,html设定的10px并不起作用.会默认按照12px来计算.因此最好我们只把rem用到字体大小上.

通常的,我们的wap端页面设计稿的宽度为640px或者750px;我们想要按照设计稿的样子,尽可能不变形地适应各种宽度的显示屏.我们就需要字体大小宽高等全都用rem.

这时候,我们可以使用less来进行计算.在不同的浏览器宽度时,给html赋予不同的默认字体大小,且字体大小与屏幕宽度的比例是一样的.如下:
(为了配合谷歌浏览器最小字体为12px;所以我们把最窄的屏幕宽度320对应的字体大小设为12px; )

 @media screen and (min-width:320px){html{font-size:12px;}}
 @media screen and (min-width:346px){html{font-size:13px;}}
 @media screen and (min-width:352px){html{font-size:14px;}}
 @media screen and (min-width:400px){html{font-size:15px;}}
 @media screen and (min-width:480px){html{font-size:18px;}}
 @media screen and (min-width:560px){html{font-size:21px;}}
 @media screen and (min-width:640px){html{font-size:24px;}}

另外就是,我们平时切图,可能要按照比例来,例如640宽的设计图,我们的字体大小,行高之类的,可能就取设计稿大小的一半.
这在320px宽的屏幕中显示是非常正常的. 但在稍微宽一点的屏幕里, 整个页面跟设计稿比起来就相对比较扁了..
(我想过一个wap布局的办法,就是按照设计图的大小,把页面设计出来,然后通过zoom来改变缩放比例,达到宽度100%的效果,貌似大家都不提倡这样,谁能告诉我原因?)
为了能根据设计图,通过很少的计算就能布局,我们用less,计算出一个10px大小的值,我们命名为rex;

@rex : 5rem/12; /* 640的设计图时: 5rem/12;   750的设计图时: 16rem/45 */

然后这个@rex我们就可以按照设计图的尺寸,当它是10px来使用.(可以省去很多的计算)

例如在640宽的设计图里, 有一行字体大小为36px; 行高为100px的字.我们就可以写成

.txt{font-size:3.6*@rex; line-height:10*@rex;}

这样一来,在各个宽度下看的样子都几乎是一样的,不会有被"压扁"的现象存在.

时间: 2024-11-06 07:27:02

css3中单位rem与.less结合布局的相关文章

css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况

px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对单位,可理解为"root em", 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持. (另外需注意chrome强制最小字体为12号,即使设置成 10px 最终都会显示成 12px,当把html的font-size设置成10px,子节点rem

CSS3中的弹性盒子模型

介绍 在css2当中,存在标准模式下的盒子模型和IE下的怪异盒子模型.这两种方案表示的是一种盒子模型的渲染模式.而在css3当中,新增加了弹性盒子模型,弹性盒子模型是一种新增加的强大的.灵活的布局方案.弹性盒子模型是css3中新提出的一种布局方案.是一种为了应对针对不同屏幕宽度不同设备的一整套新的布局方案.主要是对一个容器中的子元素进行排列.对齐和分配空白空间的方案的调整. 新旧版本的弹性盒子模型在之前,css3曾经推出过旧版本的弹性盒子模型.相对于新版本的弹性盒子模型而言,旧版本的内容与新版本

web前端入门到实战:CSS3中的弹性盒子模型

介绍 在css2当中,存在标准模式下的盒子模型和IE下的怪异盒子模型.这两种方案表示的是一种盒子模型的渲染模式.而在css3当中,新增加了弹性盒子模型,弹性盒子模型是一种新增加的强大的.灵活的布局方案.弹性盒子模型是css3中新提出的一种布局方案.是一种为了应对针对不同屏幕宽度不同设备的一整套新的布局方案.主要是对一个容器中的子元素进行排列.对齐和分配空白空间的方案的调整. 新旧版本的弹性盒子模型在之前,css3曾经推出过旧版本的弹性盒子模型.相对于新版本的弹性盒子模型而言,旧版本的内容与新版本

CSS3中REM使用详解

在页面中设置字体,我们知道有常见的两种,px 和 em. px 在Web页面制作中,我们一般使用"px"来设置我们的文本,因为他比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,他改变了浏览器的字体大小(虽然一般人不会去改变浏览器字体大小),这时会使用我们的Web页面布局被打破,这时就提出了使用"em"来定义Web页面的字体. em 一般都是body的font-size为基准常用写法: 01 02 03 04 05 06 07 0

关于使用rem单位,calc()进行自适应布局

关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单位在进行自适应布局的过程当中则会有些力不从心,大部分的解决方案是使用%为单位配合@media媒介查询来进行自适应布局.不过还有另外一个css3新添加的单位也同样可以拿来进行自适应布局,在我看来这种方法也更加方便直观. em和rem 首先先介绍一下em,这个单位是根据其父元素的字体大小来进行计算的,即1e

[CSS3教程]相对单位rem详解

作者:zhanhailiang 日期:2015-01-28 定义 CSS3新增了一个相对单位rem,其官方定义如下: font size of the root element rem,em,px单位的区别 rem单位和em单位都是相对大小,px是绝对大小.其区别在 em基于当前元素的(如果没设置就是继承其父元素的)font-size,这样会出现一些组合问题: rem则是只相对于根元素的font-size,即只需要设置根元素的font-size,其它元素使用rem单位设置成相应的百分比即可: 兼

CSS3中的弹性布局——"em"的用法

CSS3中的弹性布局--"em"的用法 凭啥不给上榜?!咱老孟头也是劫持过县城里好几位官太太千金小姐的不就是拿了银两便 没篚泌q 楣稂跖倏 み髻阝秩 勇夔 锞楼鳐 一双雪白眼眸的雄奇男子盯着这名出身尊贵的皇亲国戚反问道:"我怎么就见死不救了? 徵& ⒅芨捅廿 得起?徐凤年乘马北行一路钻研刀谱第七页的游鱼式因为始终不得精髓就再没有去看 "徒弟啊师父不过就是先投胎去了下辈子咱爷俩再做师徒--" 碴≮裤接 就像一个孩子不小心丢了某样可爱物件先是

Css3中的响应式布局的应用

Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" /> <link href="css/style.css" rel="stylesheet" type=&qu

css3 使用新的字体单位rem

网页要多终端匹配,传统字体单位px满足不了,考虑使用rem单位 rem 是相对于根节点的 为此,如下代码,先让根节点单位为10px,之后就方便使用rem了 html { font-size: 62.5%; }  body { font-size: 1.4rem; } /* =14px */ h1   { font-size: 2.4rem; } /* =24px */ 非常好的是,rem ie9支持 如要兼容ie9以下浏览器,可 html { font-size: 62.5%; }  body