最新消息:

响应式新首页Device Adaptation小结

365bet开户 采集侠 浏览 评论

由于用户浏览器分辨率分布、运营维护成本、全站页面宽度规范等原因,2012年末一淘新首页对1200px、990px、750px(for ipad)这3个尺寸的响应不同布局,期望在ipad下横屏显示990px版本,竖版显示750版本,iphone下显示750版本。不同设备尺寸的不同显示自然少不了viewport设置,目前W3C针对viewport的规范还处于草案阶段,有2种方式可以设置页面的viewport,viewport meta标签和@viewport css方式。

一、viewport meta element

<meta name=“viewport” content=“width=device-width,initial-scale=1.0”>

该viewport meta支持以下6个属性,ios对viewport meta的实现对比W3C规范草案:

二、@viewport css

如:

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

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

viewport meta方式和@viewport是可以相互转化的,估计以后@viewport是要替代viewport meta的。如:

<meta name=“viewport” content=“width=480, initial-scale=2.0, user-scalable=1”>

可以转化成以下css @viewport { width: 480px; zoom: 2.0; user-zoom: zoom; }

而且@viewport可以和media query联用,天造地设的一双呀,这样可以针对不同的终端尺寸设置不同的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),其他浏览器均不支持

ipad横版990px

ipad竖版750px

注:相关网站建设技巧阅读请移步到建站教程频道。

    发表我的评论
    取消评论

    表情

    您的回复是我们的动力!

    • 昵称 (必填)
    • 验证码 点击我更换图片

    网友最新评论