个性原创,打造品牌

拒绝模仿抄袭、拒绝模板建站;
多位资深网页设计师同时设计,让您优中选优;
网站独一无二,品牌轻易提升...

了解详情 >

代码规范,国际标准

后台php+mysql动态管理,功能强大,千万级数据;
前台div+css生成静态,代码精简,访问速度快,
符合w3c国际标准,兼容ie/火狐/苹果等任意浏览器...

了解详情 >

细微高效,全程无忧

域名一个,主机一台;
主机BGP多线路,5G存储空间,流量不限;
新闻录入、图片处理、数据备份、安全监测、网站升级...

了解详情 >

移动时代,机不可失

全新视觉、创新操作;
跨平台兼容,微信无缝对接;
不容错过的手机网络商机,不能错过的手机网站时代...

了解详情 >

搜索领先,锁定访客

在主流搜索引擎的搜索结果中,
网站的名称,排在第一页的第一名,
网站其他相关的3-5个关键词,排在第一页...

了解详情 >

营销利器,决胜千里

全国统一呼叫,品牌企业的象标志。
中国电信4008/4009、中国联通4000/4006,号码任选;
通话资费预存...

了解详情 >
以“信”为主的服务理念,“源”为标杆的服务特点351532641点击咨询010-86203368联系电话
CSS问题设计问题程序问题优化问题

CSS3中的单位和浏览器的支持情况

发布时间:2012-08-03      浏览次数:1850

很基础的一个问题,但是,其实看起来很复杂的样子~~我们来捋一捋吧~~

css3中也对css中用到的单位进行了改进,单位也就是那几个,所以我们要搞清楚再用。

%——百分比

in——寸

cm——厘米

mm——毫米

pt——point,大约1/72寸;

pc——pica,大约6pt1/6寸;

px——屏幕的一个像素点;

em——元素的font-size

ex——font-sizex-height值,为小写字母x的高度,通常相当于font-size的一半。

我们常用的有px%empx就不多说了,em%多说点儿:

1

2

3

.box{

line-height:1.3em;

}

元素的行高是当前元素继承的font-size1.3倍,

1

2

3

.box{

font-size:1.3em;

}

当前元素的字体大小是其继承的font-size1.3倍。

1

2

3

.box{

line-height:130%;

}

元素的行高是当前元素继承的font-size130%倍,等同于1.3em

1

2

3

.box{

font-size:130%;

}

当前元素的字体大小是其继承的font-size130%倍,等同于1.3em

恩,迷惑了吗?

em就是基于当前元素的(如果没设置就是继承其父元素的)font-size

%对于font-sizeline-height等,是基于其父元素的font-size的,而对于text-indentmarginpaddingwidth等属性,则是基于父元素的宽度的。

CSS3中的单位:

css3中引入了一些新的单位:

ch——字符0()的宽度;

rem——根元素(html元素)font-size

vw——viewpoint width,视窗宽度,1vw等于视窗宽度的1%

vh——viewpoint height,视窗高度,1vh等于视窗高度的1%

vmin——vwvh中较小的那个。

显然vwvhvmin是针对移动设备的,如果视窗大小变化了,这三个值也会跟着相应的变化。

rem单位感觉就是px+em的变体,是否值得使用还要看你自己的取舍:没有px精确也没有em灵活——或者说,比px灵活,比em更精确~~。。。XD。。。

如果没有定义font-size怎么办?

其实不用担心,传说,各个浏览器史无前例的默认font-size:16px;,所以,即便你在样式文件中忘了定义font-size初始值,也可以放心的使用emrem

浏览器支持:

rem,各浏览器基本都支持了, IE9+FF3.6+ChromeSafari 5+、以及 Opera 11.6+

vwvhvmin,浏览器支持并不乐观,IE9支持了,Chrome目前不支持,Chrome 20将会重新支持(貌似之前支持过?)Safari也即将支持了吧,OperaFirefox也还都不支持。

上一篇:css选择器的优先级:简洁、高效的CSS
下一篇:效果图切图前对网页美工图设计

Copyright©2016  xinycx.com  All Rights Reserved  北京信源创想科技有限公司  备案号:京ICP备17071760号-1   

京公网安备 11010802036302号


地址:北京市海淀区闵庄路门头馨村北二区33号楼3单元102室  电话:010-86203368  代理域名注册服务机构:北京新网数码信息技术有限公司

北京网站建设 北京网站制作 信源创想 品牌网站建设 企业网站建设 网站设计 APP开发 微信开发 前端切图 DIV+CSS html5切图 APP切图