CSS前缀和单位rem

/* CSS Document */
/*<h1>树懒啊<em>闪电啊</em>慢慢慢</h1>

<p>兔子啊<code>啦啦啦</code>一二三</p>*/

html{
        font-size:62.5%; 【默认16px,10/16=0.625 相当于10px】

}

h1{
      font-size:3em; 【30px】
}

p{
    font-size:1.4em; 【14px】

}

code{
        font-size:1.1em; 【因为与氟元素挂钩,这里是1.4em的1.1倍】
        font-size:0.786em; 【这里是15px,但是计算复杂】
        font-size:1.1rem; 【这里是11px,rem直接基于根元素html的字体大小来变化】
}

div{
     width:200px;
     height:200px;
     background-color:silver;

/* -webkit-border-radius:100px; 【旧版本前缀写在前面,标准写法置后,以免同时运行导致显示有误】
    border-radius:50px;*/

}

时间: 2024-12-17 18:38:42

CSS前缀和单位rem的相关文章

css中字体单位px,pt,em ,rem,百分比之间的区别和用法

css中字体单位px,pt,em ,rem,百分比之间的区别和用法 px 即像素,一般国内网站使用较多,默认大小是16px; pt 印刷行业常用单位 em  相对单位,相对父元素属性的单位 ,一般用于移动端布局 rem  结合相对定位和绝对定位的优势,相对根元素html,想要修改字体大小,只要修改html的大小就可以了 转换公式: pt=px乘以3/4 倍数em=倍数x16px 注意:1em=16px.那么12px=0.75em,10px=0.625em.   1.em的用法 在代码重写的过程中

css 相对单位rem详解

CSS3新增了一个相对单位rem(root em,根em),这个单位引起了广泛关注.这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素.这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应.目前,除了IE8及更早版本外,所有浏览器均已支持rem.对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明.这些浏览器会忽略用rem设定的字体大小.

[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单位设置成相应的百分比即可: 兼

移动端 单位 rem

rem是指相对于根元素的字体大小的单位(相对单位) rem和em的区别,em相对于父元素的字体大小的单位.rem相对于根元素html字体大小计算, px是一个绝对的单位. 所以rem可以实现强大的屏幕适配布局 例如: html{ font-size:20px; } .btn{ width:6rem; height:3rem; } //<div class='btn'></btn>那么.btn的宽度为120px;高度为60px; 所以在做移动端适配的时候就要根据不同分辨率设置font

JavaScript判断各浏览器CSS前缀的两种方式

不管浏览器更新的多快,号称多么支持标准.厂商不同,他们之间还是有很多差异.我们需要区分出这些差异,针对不同的浏览器做不同的处理. 比如 CSS 前缀,IE 的是 "-ms-",旧版 Opera 的是 "-o-",Firefox 的是 "-moz-",Safari/Chrome 是 "-webkit-".JavaScript 有多种方式判断它们. 方式1: 特性判断 // 取浏览器的 CSS 前缀 var prefix = fu

CSS中的那点事儿(一)--- CSS中的单位2

在上篇博客提到了%.px.em三个单位,其中最复杂的是em,因为要计算当前元素内的font-size,必须知道其父元素的font-size,层层累积,容易出错.现在CSS3中引入了新的单位rem,改变了这一现状. rem rem, 官方说法:根元素的font-size.官方这次说得很明白,rem是相对于根元素html来计算的,根当前元素的直接父元素无关,只要在html设置font-size就可以了,默认为1rem=16px.下面再看个例子: .container{ width: 80%; hei

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 

主流浏览器的内核私有属性css前缀

主流浏览器内核私有属性css前缀: mozilla内核 (firefox,flock等)     -moz webkit内核(safari,chrome等)   -webkit opera内核(opera浏览器)         -o trident内核(ie浏览器)               -ms 原文地址:https://www.cnblogs.com/runhua/p/9601000.html

26.CSS前缀和rem

第二十章  CSS3前缀和rem 一.css3前缀(每个浏览器的专有前缀,各大厂商的前缀列表如下) 浏览器                 厂商前缀 Chrome.Safari           -webkit- Opera                    -o- Firefox                  -moz- Internet Explorer        -ms- //在这里用 border-radius 举例(他是CSS标准属性,早期处于实验阶段,尚未列入标准时,需