Hack 自適應 針對瀏覽器寫樣式隨手筆記

2022-04-29 13:24:13 字數 1108 閱讀 9149

1.hack

「-″減號是ie6專有的hack

* ie6 、ie7識別

「\9″ ie6/ie7/ie8/ie9/ie10都生效

「\0″ 是ie8的hack

「\9\0″ 是ie9/10的hack

符號 ie6 ie7 ie8 ff

* √ √ × ×

!important × √ × √

_ √ × × ×

\9 × × √ ×

*html √ × × ×

*+html × √ × ×

僅ie5.5可見

僅ie 5.5以上可見

僅ie 5.5以下可見

ie 5.5及以上可見

ie 5.5及以下可見

非ie 5.5的ie可見

2.css3針對瀏覽器的寫法

動畫轉換

例:transform:translate

-webkit-transform:translate /*safari,chrome*/

-ms-transform:translate /* ie */

-o-transform:translate /*opera*/

-moz-transform:translate /*firefox*/

3.自適應:

蘋果4 @media screen and (max-width: 350px)

.time

兩個條件連線中間用and連線。例如:@media screen and (min-width: 350px)and(max-width:500px)

4.針對瀏覽器寫樣式:

@-moz-document url-prefix() }針對火狐寫樣式 hack

例子:@-moz-document url-prefix()}

webkit枘核瀏覽器(chrome and safari)

@media screen and (-webkit-min-device-pixel-ratio:0) }

例子: @media screen and (-webkit-min-device-pixel-ratio:0) }

瀏覽器專用HACK

第乙個hack,ie ff 所有瀏覽器 公用 height 100px 第二個hack ie6專用 height 100px 第三個hack ie6 ie7公用 height 100px height 100px 介紹完了這三個hack了,下面我們再來看看如何在乙個樣式裡分別給乙個屬性定義ie6 i...

寬高自適應 瀏覽器相容

若塊級元素寬度不設定,或者設定成100 都是佔據其父級元素的一整行 應用場景 1 頁面最外層的盒子一般都要佔據螢幕的大小,所以寬度100 2 子元素使用百分比表示盒模型任意部分大小的話,代表的是子元素盒模型任意部分尺寸 父元素寬度百分比 除了高度外,子元素高度 父元素高度百分比 忽略 父元素高度由子...

布局根據瀏覽器大小自適應

最近在寫前端頁面,然後要寫乙個布局自適應,先貼效果圖,我處理的不是很好,見諒。大致的效果就是這樣的。我前端新手小白,記錄一下這種布局方法。然後我就直接貼 了 我這個是vue的,然後html的寫法差不多 parent children v for i in 12 key i children cont...