響應(yīng)式新首頁Device Adaptation小結(jié)由于用戶瀏覽器分辨率分布、運營維護成本、全站頁面寬度規(guī)范等原因，2012年末一淘新首頁對1200px 、990px 、750px （for ipad）

響應(yīng)式新首頁Device Adaptation小結(jié)

由于用戶瀏覽器分辨率分布、運營維護成本、全站頁面寬度規(guī)范等原因，2012年末一淘新首頁對1200px 、990px 、750px （for ipad）這3個尺寸的響應(yīng)不同布局，期望在ipad 下橫屏顯示990px 版本，豎版顯示750版本，iphone 下顯示750版本。不同設(shè)備尺寸的不同顯示自然少不了viewport 設(shè)置，目前W3C 針對viewport 的規(guī)范還處于草案階段，有2種方式可以設(shè)置頁面的viewport ，viewport meta標(biāo)簽和@viewport css方式。

一、viewport meta element

該viewport meta支持以下6個屬性，ios 對viewport meta的實現(xiàn)對比W3C 規(guī)范草案：本文由 過期域名搶注www.yumichong.cn 域名搶注 域名預(yù)訂 整理

二、@viewport css

如：

@viewport { width： device-width; zoom： 2.0; }

w3c 草案中@viewport 支持以下屬性

viewport meta方式和@viewport是可以相互轉(zhuǎn)化的，估計以后@viewport是要替代viewport meta的。如：

可以轉(zhuǎn)化成以下css @viewport { width： 480px; zoom： 2.0; user-zoom： zoom; }

而且@viewport可以和media query聯(lián)用，天造地設(shè)的一雙呀，這樣可以針對不同的終端尺寸設(shè)置不同的viewport 。

@viewport {

width ： device-width;

} @media screen and （min-width ： 400px ） {

div { color： red; } }

@media screen and （max-width ： 400px ） {

div { color： green; }

}

不過，@viewport目前safari 并不支持，Opera Mobile 11、ie10支持@viewport,但需要加私有前綴（-o-viewport 、-ms-viewport ），其他瀏覽器均不支持