對CSS中zoom屬性的總結

來源:互聯網
上載者:User
在css中,zoom屬性作用是設定或檢索對象的縮放比例。對應的指令碼特性為zoom。雖然很多人都知道,但是任然有人不知道zoom的具體的用法,或者沒有深究過,下面就把zoom的用法總結一下:

1.CSS樣式中屬性zoom:1的作用詳解

CSS中zoom:1的作用
相容IE6、IE7、IE8瀏覽器,經常會遇到一些問題,可以使用zoom:1來解決,有如下作用:
觸發IE瀏覽器的haslayout
解決ie下的浮動,margin重疊等一些問題。

2.CSS中zoom屬性或overflow:auto屬性清除浮動

其實在CSS中的Zoom這個屬性一般不為人知,甚至有些CSS手冊中都查詢不到。其實Zoom屬性是IE瀏覽器的專有屬性,Firefox等瀏覽器不支援。它可以設定或檢索對象的縮放比例。除此之外,它還有其他一些作用,比如觸發ie的hasLayout屬性,清除浮動、清除margin的重疊等。

3.zoom和transform:scale()的區別

zoom和transform:scale()都可以用於縮放,目前移動端存在各種各樣不同螢幕大小的手機,為了相容不同寬度的螢幕,我們可以基於某一螢幕寬度大小(比如iPhone5的320,這個根據設計稿來)做出頁面後,再對頁面進行縮放以相容其他螢幕寬度。

4.css中的zoom的使用

zoom : normal | number
normal :  預設值。使用對象的實際尺寸
number :  百分數 | 無符號浮點實數。浮點實數值為1.0或百分數為100%時相當於此屬性的 normal 值用白話講解就是zoom:後面的數字即放大的倍數,可 以是數值,也可以是百分比。如:zoom:1,zoom:120%。

ps:網上都說是ie的專有屬性,本人親測chrome下也可以使用;(Firefox瀏覽器不支援)

zoom屬性相關的問答:

1.css zoom 如何計算控制頁面大小?

2.zoom 放大背景圖怎麼是從頁面左上方開始放大的?

3.使用css中的zoom:50%後對頁面文字大小不生效,什麼原因?

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.