pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

css3中單位px,em,rem,vh,vw,vmin,vmax的區別及瀏覽器支持情況

這篇文章主要介紹了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的計算還是以12px為基準,所以網上很多文章提到的將html的font-size設為10方便計算不是那么可取)。

rem在移動端應用可參考淘寶的頁面http://m.taobao.com (html的font-size通過動態計算獲取)

頁面基準320px(20px),html font-size值的計算:

var ele=document.getElementsByTagName("html")[0],    
     size=document.body.clientWidth/320*20;    
ele.style.fontSize=size+"px"  

  注:需設置meta縮放比1:1

vw:viewpoint width,視窗寬度,1vw等于視窗寬度的1%。

vh:viewpoint height,視窗高度,1vh等于視窗高度的1%。

vmin:vw和vh中較小的那個。

vmax:vw和vh中較大的那個。

vw, vh, vmin, vmax:IE9+局部支持,chrome/firefox/safari/opera支持,iOS safari 8+支持,Androidbrowser4.4+支持,chrome for android39支持

其它的單位還有:

%:百分比

in:寸

cm:厘米

mm:毫米

pt:point,大約1/72寸

pc:pica,大約6pt,1/6寸

ex:取當前作用效果的字體的x的高度,在無法確定x高度的情況下以0.5em計算(IE11及以下均不支持,firefox/chrome/safari/opera/ios safari/android browser4.4+等均需屬性加么有前綴)

ch:以節點所使用字體中的“0”字符為基準,找不到時為0.5em(ie10+,chrome31+,safair7.1+,opera26+,iOS safari 7.1+,Android browser4.4+支持)

以上所述是小編給大家介紹的css3中單位px,em,rem,vh,vw,vmin,vmax的區別及瀏覽器支持情況,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!

【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

本篇文章主要介紹了詳解CSS3 rem(設置字體大小) 教程,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
本篇文章主要介紹了CSS3 linear-gradient線性漸變生成加號和減號的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
這篇文章主要介紹了CSS mask-image屬性詳細介紹(小結)的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
這篇文章主要介紹了css3中的漸進增強和優雅降級的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
這篇文章主要介紹了淺談css3新單位vw、vh、vmin、vmax的使用詳解的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
這篇文章主要介紹了淺談css3中calc在less編譯時被計算的解決辦法的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
主站蜘蛛池模板: 翅片管换热器「型号全」_厂家-淄博鑫科环保| 橡胶弹簧|复合弹簧|橡胶球|振动筛配件-新乡市永鑫橡胶厂 | 插针变压器-家用电器变压器-工业空调变压器-CD型电抗器-余姚市中驰电器有限公司 | 蓄电池在线监测系统|SF6在线监控泄露报警系统-武汉中电通电力设备有限公司 | 酸度计_PH计_特斯拉计-西安云仪| 紫外可见光分光度计-紫外分光度计-分光光度仪-屹谱仪器制造(上海)有限公司 | 泰国专线_泰国物流专线_广州到泰国物流公司-泰廊曼国际 | 太阳能发电系统-太阳能逆变器,控制器-河北沐天太阳能科技首页 | 昊宇水工|河北昊宇水工机械工程有限公司 | 沈阳建筑设计公司_加固改造设计_厂房设计_设计资质加盟【金辉设计】 | 最新电影-好看的电视剧大全-朝夕电影网 | 实木家具_实木家具定制_全屋定制_美式家具_圣蒂斯堡官网 | led全彩屏-室内|学校|展厅|p3|户外|会议室|圆柱|p2.5LED显示屏-LED显示屏价格-LED互动地砖屏_蕙宇屏科技 | 【直乐】河北石家庄脊柱侧弯医院_治疗椎间盘突出哪家医院好_骨科脊柱外科专业医院_治疗抽动症/关节病骨伤权威医院|排行-直乐矫形中医医院 | 胶泥瓷砖胶,轻质粉刷石膏,嵌缝石膏厂家,腻子粉批发,永康家德兴,永康市家德兴建材厂 | 上海宿田自动化设备有限公司-双面/平面/单面贴标机 | 雪花制冰机(实验室雪花制冰机)百科| 河南膏药贴牌-膏药代加工-膏药oem厂家-洛阳今世康医药科技有限公司 | 全自动翻转振荡器-浸出式水平振荡器厂家-土壤干燥箱价格-常州普天仪器 | MES系统-WMS系统-MES定制开发-制造执行MES解决方案-罗浮云计算 | ★店家乐|服装销售管理软件|服装店收银系统|内衣店鞋店进销存软件|连锁店管理软件|收银软件手机版|会员管理系统-手机版,云版,App | 锻造液压机,粉末冶金,拉伸,坩埚成型液压机定制生产厂家-山东威力重工官方网站 | 2025世界机器人大会_IC China_半导体展_集成电路博览会_智能制造展览网 | 披萨石_披萨盘_电器家电隔热绵加工定制_佛山市南海区西樵南方综合保温材料厂 | 宽带办理,电信宽带,移动宽带,联通宽带,电信宽带办理,移动宽带办理,联通宽带办理 | Magnescale探规,Magnescale磁栅尺,Magnescale传感器,Magnescale测厚仪,Mitutoyo光栅尺,笔式位移传感器-苏州连达精密量仪有限公司 | 食安观察网| 扬州汇丰仪表有限公司| 智慧旅游_智慧景区_微景通-智慧旅游景区解决方案提供商 | 切铝机-数控切割机-型材切割机-铝型材切割机-【昆山邓氏精密机械有限公司】 | 米顿罗计量泵(科普)——韬铭机械 | 精密五金冲压件_深圳五金冲压厂_钣金加工厂_五金模具加工-诚瑞丰科技股份有限公司 | CE认证_产品欧盟ROHS-REACH检测机构-商通检测 | 【孔氏陶粒】建筑回填陶粒-南京/合肥/武汉/郑州/重庆/成都/杭州陶粒厂家 | 江西自考网 | 领先的大模型技术与应用公司-中关村科金 | 包塑软管|金属软管|包塑金属软管-闵彬管业 | Safety light curtain|Belt Sway Switches|Pull Rope Switch|ultrasonic flaw detector-Shandong Zhuoxin Machinery Co., Ltd | 针焰试验仪,灼热丝试验仪,漏电起痕试验仪,水平垂直燃烧试验仪 - 苏州亚诺天下仪器有限公司 | cnc精密加工_数控机械加工_非标平键定制生产厂家_扬州沃佳机械有限公司 | 众品家具网-家具品牌招商_家具代理加盟_家具门户的首选网络媒体。 |