首页 > 经验 > 关键词 > 响应式页面设计最新资讯 > 正文

响应式新首页Device Adaptation小结

2013-02-22 13:51 · 稿源:一淘UX

由于用户浏览器分辨率分布、运营维护成本、全站页面宽度规范等原因,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

  • 相关推荐
  • 大家在看
  • MIUI 13全新UI设计曝光:上下滑动式电源菜单

    尽管MIUI 12今年4月才发布,6月开推稳定版,但MIUI 13的开发已经悄然进行中。日前,国外用户Enes Keskin晒出号称是MIUI 13全新电源菜单的UI设计。仅从预览来看,长按电源菜单后的柱状条带设

  • vivo IFEA 分离式镜头设计荣获2020红点设计概念大奖

    2020 年 10 月 9 日,深圳 —— 享誉全球的设计界“奥斯卡”德国红点奖于线上颁奖典礼中官宣获奖名单。vivo工业设计团队凭借vivo IFEA(Interest Free Explore Amazing)分离式镜头设计,在来自 52 个国家的 4170 件作品中脱颖而出,荣获红点设计概念奖,彰显其卓越产品设计和领先创新科技。对vivo而言,成为近三年为数不多斩获红点奖的中国手机品牌,意义非凡。红点设计概念奖证书vivo IFEA分离式镜头设计示意图 德国红点奖始于 19

  • 米家推出纯净式智能加湿器 采用无雾设计售199元

    小米推出米家纯净式智能加湿器和米家踢脚线电暖器E两款新品,加湿器售价199元,电暖器售价399元,今日均已开启众筹预购。此次推出的新一代米家纯净式加湿器采用无雾加湿设计,在保证加湿效果的同时能够有效阻拦水中杂质的散播,不会产生白色粉末。相比于传统加湿器通过水的高频振荡雾化成水雾,纯净式加湿器是通过高速风扇旋转产生的气流和负压对湿润滤芯进行冷蒸发,进而达到了加湿的目的?

  • 站长之家诚聘:SEO高手、资深网页设计师、JAVA/GO/PHP/.NET工程师

    2020年站长之家开启新一波人员招募,欢迎小伙伴加盟。本次的首推职位有资深SEO高手、资深网页设计师、JAVA/GO/PHP/.NET程序员,欢迎大家投递简历到hr@chinaz.com邮箱(务必附作品、工作经历、工作成绩等)。SEO高手(若干人)职责描述:1、负责站长之家网站的搜索引擎优化方案设计,提高网站流量、收录和排名;2、负责监控和调研搜索引擎数据与规则,调研竞争对手及其他网站相关策略,制定并实施应对和优化方案;3、负责对SEO相关数据进

  • Galaxy S21的外形设计几乎与S20一样 但背面有全新环绕式摄像头

    有传言称,GalaxyS21系列将在2020年推出,三星希望借此与苹果的iPhone12系列对抗。新的传闻声称,新的旗舰系列将在2021年1月初到来,而且,我们已经看到GalaxyS21的渲染图也已经出现了。从正面看,这款机型与GalaxyS20几乎一模一样,但从背面看,相机模块可能会选择不同的风格,这有助于让客户能够区分这个版本和今年早些时候推出的手机。

  • OPPO首款智能电视露真容:超窄边框加持、摄像头或弹出式设计

    其实之前,OPPO已经预告了,旗下首款智能电视将于10月份发布,或许是等不急了,现在官方已经偷偷送出了彩蛋。没错,在今天OPPO TV联合8K RAW出品的一段视频中(用4K 120FPS超高清画面,展示中

  • vivo分离式镜头要量产:一举斩获2020红点设计概念大奖

    本月vivo展示了一款概念手机,它最大的看点就是镜头可以分离。凭借这一创新性设计,vivo概念机斩获了2020年红点设计概念大奖。今天vivo官方微博暗示,vivo这款分离式镜头方案预计在未来量产

  • 陌声APP响应及时,投诉处理解决率100%

    近日,从深圳市消委会获悉,陌声APP消费通评价指数得分5. 4 分,位居行业较高水平。这是继陌声APP正式开始在深圳市消委会消费维护公共平台——" 315 消费通"受理消费者投诉后评分上的一次重要突破。 从数据上可知,本次消费评价指数在接单速度、提出方案速度、和解成功、调解成功等维度均有明显提升。这反映了陌声APP在快速响应消费者投诉且处理成功率较高,大大降低了消费者维权成本,体现了经营者对消费者的重视,消费者的服务?

  • iOS14怎么取消app资源库页面 app资源库页面怎么关闭

    苹果iOS14加入了App资源库的新功能,这个功能就是将所有手机下载安装的app全部都显示在一个页面中,可以让用户找到想要的app软件,但很多用户表示不喜欢这个app资源库,那么如何将app资源库页面删除呢,我们来一起看下吧。

  • 雪佛龙禁止全球员工使用微信!为响应美国政府禁令

    前不久,美国政府发布命令禁止美国个人及企业与腾讯公司进行与微信有关的任何交易,甚至禁止他们使用微信。本周二,有消息报道,能源巨头雪佛龙公司要求该公司全球员工从手机上删除微信应用,其也成为首批响应美国总统行政禁令的美国公司之一。

  • 轻松筹积极响应国家政策,为百姓带去福利

    在九月的第一天, "惠桂保"普惠型补充医疗保险计划被大众所知,并可以正式开放投保,这是轻松筹与国富人寿联合推出的,"惠桂保"这款普惠性商业健康险产品是特意针对广西地区参保人群而开发的,它与我们经常见到的保险品种不一样,它能有效衔接基本医疗保险,具有准入门槛相对较低、保障范围广等特点。这个保险被大家所知后,反响强烈。对广西人民来说可是意外之喜,因为填补了基本医疗保险和商业健康险的过渡地带的空档期,解决广?

  • 3种创建网站“关于”页面创造性方法,与访客建立“亲密关系”

    ​没有人比你更了解你自己或你的业务。然而,为什么写很多时候网站上“关于”页面是创建网站最困难的部分呢?网站的“关于”页面是让理想客户知道为什么这个产品是最能满足他们需求的最佳场所。

  • 颈挂式运动蓝牙哪款好?十大颈挂式运动耳机排行

    对于一个健身达人来说,没有音乐的运动是没有灵魂的。特别是平常室外跑步时,如果不能用耳机将自己与世界隔离,就无法很好地沉浸在运动过程中。对于一部分人来说,带上耳机也能让自己显得不那么孤单。运动时身体的动作幅度是比较大的,普通的有线耳机肯定不行,很容易就被钩住。无线蓝牙耳机就更不行了,跑几步就不知道掉哪去了。为了能更好的体验运动的过程,达到更棒的健身效果,推荐几款性价比高的颈挂式蓝牙耳机给大家~1.NANK?

  • 拼多多拿下春晚:是快手式的KPI,还是腾讯式的“偷袭珍珠港”?

    今年在各大电商备战 618 的时候,拼多多忙着助贫助农,关键时刻联合湖南卫视祭出拼多多 618 晚会,扳回一局。如今时逢双节同庆,友商们也在为双 11 预热,拼多多却横跨两阶,直指春晚,补足“失去”的年味。怎么回事?

  • 滴滴崩了 页面显示“网络加载异常,点击重试”

    ​今日下午 3 点左右,大量网友在微博反映称自己的滴滴出行APP出现了宕机的情况,页面显示“网络加载异常,点击重试”。昨日,滴滴表示,国庆节启程高峰将出现在 9 月 30 日,将成为年内最难打车日,预计打车成功率不足60%。

  • 便宜好用的挂脖式蓝牙耳机有吗?平价挂脖式蓝牙耳机安利

    挂脖式蓝牙耳机现在越来越受到大家的欢迎,特别是年轻人。所以在选择的时候我尽量满足年轻人的需求,着重关注一下音质,时尚度,舒适度,这些方面。我按照价位给大家推荐几款挂脖式蓝牙耳机,大家可以根据自己的需求和预算针对性的看。推荐一、NANK南卡S2游戏蓝牙耳机售价:249元蓝牙协议:Aptx-ll,Aptx-hd、aptx、AAC,SBC防水等级:IP55级续航时间:12H一句话点评:Nank南卡S2蓝牙耳机是最近最火的运动耳机,性价比很高,在质量

  • 蓝牙耳机挂脖式好还是无线好?挂脖式性价比蓝牙耳机排名

    挂脖式蓝牙耳机绝对是近几年运动健身听歌的利器,对比有线耳机,挂脖式蓝牙耳机凭借其便捷性深受不少运动爱好者的喜爱。再者,随着近几年蓝牙无线技术的快速发展,现在挂脖式蓝牙耳机的音质和蓝牙传输的稳定性已经得到了质的飞跃。不过蓝牙耳机哪个品牌更值得买?还是一起看看目前挂脖式蓝牙耳机的最新排名情况吧。一、NANK南卡S2游戏蓝牙耳机售价:249元蓝牙协议:Aptx-ll,Aptx-hd、aptx、AAC,SBC防水等级:IP55级续航时间:12H

  • 颈挂式蓝牙耳机哪个牌子好?性价比颈挂式蓝牙耳机排名

    颈挂式蓝牙耳机绝对是近几年运动健身听歌的利器,对比有线耳机,颈挂式蓝牙耳机凭借其便捷性深受不少运动爱好者的喜爱。再者,随着近几年蓝牙无线技术的快速发展,现在颈挂式蓝牙耳机的音质和蓝牙传输的稳定性已经得到了质的飞跃。不过蓝牙耳机哪个品牌更值得买?还是一起看看目前颈挂式蓝牙耳机的最新排名情况吧。1.NANK南卡S2游戏蓝牙耳机售价:249元蓝牙协议:Aptx-ll,Aptx-hd、aptx、AAC,SBC防水等级:IP55级续航时间:12H一

  • 颈挂式运动耳机哪些好?2020颈挂式运动耳机榜单出炉

    我们日常的运动基本上就是跑步居多了,所以我们经常可以看到傍晚公园,街道上很多有人都在夜跑,既为了锻炼身体,也为了放松压力。虽然运动可以放松压力,但同时也会疲倦,所以很多人就会使用挂脖蓝牙耳机来听听歌,来消除运动带来的疲倦感。今天我就分享几款很好地运动挂脖蓝牙耳机,希望对你各位有用。一、NANK南卡S2游戏蓝牙耳机售价:249元蓝牙协议:Aptx-ll,Aptx-hd、aptx、AAC,SBC防水等级:IP55级续航时间:12H一句话点评

  • 有什么推荐的半入耳式蓝牙耳机?半入耳式耳机音质排行榜!

    随着科技的进步,耳机的形式也发生了不少的变化。以前是平头式的耳塞,到半入耳,到入耳式。购买耳机的时候,你会发现,现在市面上大多数耳机都是入耳式。而半入耳式的耳机,真的越来越少。入耳式耳机确实比半入耳式耳机表现更好,更好的封闭性,减少漏音,减低外界噪音对音乐的干扰。加大低频的质感和量感,增加对音乐细节的表现。可以用更低的音量欣赏音乐,更好的保护耳朵。当然,并不是所有人都喜欢入耳式或者都适合入耳式。半

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议
  • 热门标签

热文

  • 3 天
  • 7天