收藏 分享(赏)

新首页Device Adaptation小结.doc

上传人:yjrm16270 文档编号:6981190 上传时间:2019-04-29 格式:DOC 页数:3 大小:241KB
下载 相关 举报
新首页Device Adaptation小结.doc_第1页
第1页 / 共3页
新首页Device Adaptation小结.doc_第2页
第2页 / 共3页
新首页Device Adaptation小结.doc_第3页
第3页 / 共3页
亲,该文档总共3页,全部预览完了,如果喜欢就下载吧!
资源描述

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

2、a element该 viewport meta 支持以下 6 个属性,ios 对 viewport meta 的实现对比 W3C 规范草案:本文由 过期域名抢注 域名抢注 域名预订 整理二、viewport css如:viewport width: device-width; zoom: 2.0; w3c 草案中 viewport 支持以下属性viewport meta 方式和viewport 是可以相互转化的,估计以后viewport 是要替代viewport meta 的。如:可以转化成以下 css viewport width: 480px; zoom: 2.0; user-zoom

3、: 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),其他浏览器均不支持

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 企业管理 > 管理学资料

本站链接:文库   一言   我酷   合作


客服QQ:2549714901微博号:道客多多官方知乎号:道客多多

经营许可证编号: 粤ICP备2021046453号世界地图

道客多多©版权所有2020-2025营业执照举报