首页 > 交互 > 关键词 > 响应式Web设计最新资讯 > 正文

通过CSS3 Media Query实现响应式Web设计

2011-11-22 10:43 · 稿源:Be For Web

十一长假已然过去了一大半。今天倒真是晴朗的不行,向窗外望去几乎可以看到阳光穿过凉爽的空气一缕缕洒落下来的样子。自从不再是学生,对每年的几次长假就无比珍惜,想方设法让每一天都尽量过的饱满一些;夜里闭上眼,满脑子就都是Drupal、博客、咖啡、使命召唤、南方公园。..也许需要出门走一走了。

OK开始说正经的了。在之前一篇译文中,我们了解了响应式Web设计的概念、组成要素以及基本的实现思路。今天继续相关话题,我们将从前文介绍过的"弹性布局结构"这方面出发,通过一个具体的实例来深入学习。

如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大。除了使用传统的台式机,用户会越来越多的通过手机、上网本、iPad一类的平板设备来浏览页面。这种情况下,固定宽度的设计方案将会显得越发不合理。页面需要有更好的适应性,其布局结构要做到根据不同的设备及屏幕分辨率进行响应调整。接下来,我们将了解一下怎样通过HTML5和CSS3 Media Queries(媒介查询)相关技术来实现跨设备跨浏览器的响应式Web设计方案。

范例效果预览

首先,我们来看看本篇范例的最终效果演示。打开该页面,拖拽浏览器边框,将窗口慢慢缩小,同时观察页面结构及元素布局是怎样基于宽度变化而自动响应调整的。

更多范例

我(原文作者)使用media query的方式设计了一些WordPress模板,比如TisaEleminSucoiTheme2FunkiMinblrWumblr等。

概述

我们将范例页面的父级容器宽度设置为固定的980px,对于桌面浏览环境,该宽度适用于任何宽于1024像素的分辨率。我们通过media query来监测那些宽度小于980px的设备分辨率,并将页面的宽度设置由"固定"方式改为"液态",布局元素的宽度随着浏览器窗口的尺寸变化进行调整。当可视部分的宽度进一步减小到650px以下时,主要内容部分的容器宽度会增大至全屏,而侧边栏将被置于主内容部分的下方,整个页面变为单栏布局。

HTML代码

我们将把注意力集中在页面的主要布局方面,并使用HTML5标签来更加语义化的实现这些结构,包括页头、主要内容部分、侧边栏和页脚:


<div id="pagewrap">
<header id="header">
<hgroup>
<h1 id="site-logo">Demo</h1>
<h2 id="site-description">Site Description</h2>
</hgroup>
<nav>
<ul id="main-nav">
<li><a href="#">Home</a></li>
</ul>
</nav>
<form id="searchform">
<input type="search">
</form>
</header>
<div id="content">
<article class="post"> blog post </article>
</div>
<aside id="sidebar">
<section class="widget"> widget </section>
</aside>
<footer id="footer"> footer </footer>
</div>

HTML5.js

IE是永恒的话题;对于我们使用的HTML5标签,IE9之前的版本无法提供支持。目前的最佳解决方案仍是通过html5.js来帮助这些旧版本的IE浏览器创建HTML5元素节点。在我们的页面HTML代码中调用该JS文件:

<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

CSS

HTML5块级元素样式

首先仍是浏览器兼容问题。虽然我们已经可以在低版本的IE中创建HTML5元素节点,但还是需要在样式方面做些工作,将这些"新"元素声明为块级:

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}

主要结构的CSS

忽略细节,我们仍是将注意力集中在大问题上。正如在前文"概述"中提到的,默认情况下页面容器的固定宽度为980像素,页头部分(header)的固定高度为160像素;主要内容部分(content)的宽度为600像素,左浮动;侧边栏(sidebar)右浮动,宽度为280像素。

#pagewrap {
    width: 980px;
    margin: 0 auto;
}
 
#header {
    height: 160px;
}
 
#content {
    width: 600px;
    float: left;
}
 
#sidebar {
    width: 280px;
    float: right;
}
 
#footer {
    clear: both;
}

截至目前的效果演示

目前我们只是初步完成了页面结构的HTML和默认结构样式,当然,并不包括那些与话题无关的细节实现问题。正如可以在目前的演示中看到的,由于还没有做任何media query方面的工作,页面还不能随着浏览器尺寸的变化而改变布局。

网友热搜:

  • 相关推荐
  • 大家在看
  • MediaTek天玑芯片成5G最热销?iQOO Z1成市场最大黑马

    2020 两个季度将过,科技产业也受到了不同程度的影响,但我们看到一季度包括商务、教育、娱乐、消费的在线应用需求全面爆发,在很大程度上对5G的快速落地起到了促进作用。 2020 上半年包括上游厂商、终端品牌全面发力5G,MediaTek也通过前瞻布局、充分的技术储备以及与手机品牌的深入合作,在 5 月快速响应市场需求推出了旗舰5G芯片天玑1000Plus,并助力iQOO Z1 成为5G手机中最受关注的产品之一。iQOO Z1 成为上半年5G黑马有两大核

  • 美瑞时(MRISSTIME)发展历程

    美瑞时(MRISSTIME)是世界著名制表品牌之一,隶属于瑞士瑞时集团,瑞士瑞时集团创立于1978年,总部位于洛桑。集团旗下围绕世界名品钟表收藏及高雅格调文化生活方式交流的全球瑞时会俱乐部100余家,服务于全球近500万VIP客户。自19世纪中叶,Ammann家族开始从事钟表制造及收藏,拥有独立的制表企业及顶级腕表收藏艺术廊、钟表博物馆。Ammann家族所坚持的理念,为品牌开创独树一帜的视野,并留下经典隽永的传世作品。直到今天,美瑞时(MRISSTIM

  • 国潮+科技!LUCI immers带你领略沉浸式电竞新体验

    6 月 20 日,由鼓楼区科学技术局主办的“ 2020 南京创新周中华门潮科技大赛-全民电竞互动赛”在南京鼓楼区水木秦淮文化艺术街区如期开赛。LUCI此次首次来到南京城,并亮相活动现场,通过旗下可穿戴设备——LUCI immers头戴显示器,为现场观众带来身临其境的“沉浸式”科技体验。 目前我国已成为全球电竞产业发展最快、最受关注的地区之一,并成为全球首个开展电竞主客场的地区。随着电竞游戏的全民化,火爆程度仍然维持在较高水平

  • 设计师的福音,超高颜值的ConceptD 3设计本

    对于众多设计师而言,一款专业的笔记本必不可少,但在笔记本市场上符合设计师需求,轻薄、性能、色彩与颜值都满足设计师群体的笔记本少之又少,如何选择选择一款适合创作的笔记本成了众多设计师们的难题。2019年,宏碁针对设计师群体推出了ConceptD系列设计本,在保持轻薄的同时拥有高性能,并为设计师们带来精准的屏幕色彩,提高创作效率,成为众多设计师的不二之选。并在今年618京东购物节之际,宏碁开启限时优惠,618期间购买Co

  • 最强蜗牛服务器无响应详细解决办法 三种办法解决服务器无响应

    最强蜗牛经常的会碰到服务器无响应的情况,那么遇到这样的情况怎么办呢?下面就来为大家分享一下最强蜗牛服务器无响应详细解决办法。

  • 梅赛德斯(Mercedes)和英伟达(Nvidia)合作建立强大的计算平台

    [TechWeb]梅赛德斯·奔驰(Mercedes-Benz)与英伟达(Nvidia)合作开发用于汽车的下一代计算平台,该平台将支持从空中软件更新到自动驾驶的所有内容。这家德国汽车制造商表示计划从2024年开始在其车队中推广这项新技术。新平台将基于Nvidia的片上系统Orin技术,还将使用基于San Jose的公司完整的Drive AGX软件堆栈。Nvidia 于2019年12月在CES上首次展示了Orin ,除了顶级规格(例如每秒可以进行200万亿次运算,同时使用更少的功率

  • 外媒称微软响应机制太慢:8个月前反馈问题Win10 5月更新依然未修复

    8个月前反馈的问题,微软居然在Windows 10更新中没有解决,这确实有点说不过去。现在,有用户反馈称Windows 10 May 2020(20H1/Version 2004)功能更新导致“Fresh Start”功能无法

  • 5nn麒麟+5倍潜望式光变 华为Mate 40手机将于国庆节发售

    2020年5G手机很快就要进入下半场了,其中最受期待的旗舰5G就有华为的Mate 40系列,今年该系列手机无疑会是全线5G,微博大V@长安数码君爆料称Mate 40系列今年会在国庆节发售,这个时间要比去年更

  • MediaTek声明:公司手机产品均为标准品 无任何为特定客户定制情况

    近日《日本经济新闻》及引用转载的多家媒体在报道中提及“华为欲规避制裁拟通过联发科采购台积电芯片”,联发科今日回应称,本公司一向遵循相关全球贸易法律法规,手机芯片产品均为标准品,并无任何为特定客户而特制的情况。联发科称,公司绝无违反或规避相关法律和法规的行为,该错误报导已严重影响本公司信誉,已要求相关媒体更正。联发科表示, MediaTek和多家手机厂商都有良好且长期的合作关系,我们致力于通过创

  • 华为Mate 40 Pro爆料:首次加入潜望式镜头 支持5倍光变

    6月13日消息,爆料人RODENT950表示,Mate 40 Pro的主要升级之处是变焦和电影镜头,主摄和TOF与P40 Pro+相同。RODENT950称Mate 40 Pro加入了潜望式长焦镜头(这将是Mate系列第一次使用潜望式镜

  • HTTP和HTTPS是什么?

    我们都知道使用浏览器访问一个网站页面,需要知道该网站的域名,例如访问百度知道,在浏览器的地址栏中我们会看到一串URL。网站的URL会分为两部分:通信协议和域名地址。域名地址都很好理解,不同的域名地址表示网站中不同的页面,而通信协议,简单来说就是浏览器和服务器之间沟通的语言。网站中的通信协议一般就是HTTP协议和HTTPS协议。两者分别是什么,有什么区别呢?HTTP协议HTTP协议也就是超文本传输协议,是一种使用明文数据?

  • 华为Mate 40手机将于国庆节发售:搭载全新5nm芯片 支持5倍潜望式光变

    按照往年惯例,华为将在今年10-11月推出全新的Mate 40系列旗舰,不过作为全球最大的手机厂商之一,华为的每一款代表性旗舰的一丝一毫消息都备受外界关注,而全新的华为Mate40系列也逐渐开始进入大家的视野。现在有最新消息,近日有知名数码博主爆料称,该机将会在今年国庆节发售。我们知道,去年的华为Mate 30系列是在9月19日率先在德国发布,随后在9月26日于国内正式亮相。而据知名数码博主@长安数码君 最新发布的消息

  • “服装设计dress”时尚领域排行榜,百家号分类应该怎么选

    备注:本文数据来自站长之家移动传媒平台,文章涉及的数据依托平台大数据计算所得,非百度官方数据,仅供参考。服装设计dress是当前百家号中的普通号,目前账号百家号权重为3,综合排名位列18328名,时尚分类排名位列466名,领先了98.4%的百家号。 服装设计dress百家号概况 服装设计dress的简介为我爱设计,时尚生活彰显魅力个性。,是一家主旨明确、领域专注的自媒体作者,截止目前为止他们已经在百家号上发布了超过109篇的游戏内

  • 携程BOSS直播13场总GMV破5亿元

    6月11日消息,昨日晚间,携程BOSS梁建章亮相西安W酒店。他COS成“秦始皇”,与COS成“历代帝王将相”的携程高管天团,一起为旅游复苏“带货”。梁建章COS成“秦始皇” 与美女直播助理“王母娘娘” 据统计,当晚观众达329万,比平日多50%;单场GMV创纪录地破9017万元,几乎是平日的一倍;至此,“携程BOSS直播”13场总GMV破5亿。直播中,携程的一众高管也是玩的很嗨。梁建章化身秦始皇:“西安是丝路起点。很多动物例如

  • 李楠评价PS5工业设计:这两点差评

    6月12日,索尼正式召开PS5发布会,PS5游戏主机的真机外观也终于揭开神秘面纱。外观方面,PS5主机采用了一种立式夹层设计,也有点像一本立起来的书籍,上宽下窄,中间是黑色的主体,两侧是乳白

  • 郭明錤:AirPods 3采用全新外观设计+配置升级、将大卖

    目前苹果在售的AirPods无线蓝牙耳机主要有两款,分别是带主动降噪设计、入耳式的AirPods Pro以及半入耳式的AirPods 2。在最新投资报告中,知名分析师郭明錤透露了AirPods 3的动态。据他所言

  • HTC U20 5G、Desire 20 Pro正式发布

    DoNews 6月16日消息(记者 刘文轩)许久未公布新机的HTC今天正式发布第一款5G手机HTC U20 5G,一同发布的还有4G中端手机Desire 20 Pro。HTC U20 5G搭载高通骁龙765G,支持原生双模5G连接,配备6.8英寸屏幕,5000mAh容量电池,售价只要18990元新台币(约4130元人民币),成为目前台湾市场最便宜的5G新机。HTC U20 5G背部搭载4颗镜头,分别是4800万像素/f1.8光圈标准镜头、800万像素/118度超广角镜头、超微距20mm镜头、200万像素景深

    HTC
  • Strategy Analytics:2G和3G用户占全球移动用户总数的46%

    6月19日消息,Strategy Analytics基于其免费报告《低成本4G手机:市场动态和机遇》,并结合最新的产业发展情况,分析了当前2G/3G的退网趋势和4G用户迁移机会。Strategy Analytics最新的无线市场预测,今年初,2G和3G用户占全球移动用户总数的46%,但贡献的收入却只占全球移动总收入的27%。到2023年,这一收入占比将下降到10%。非洲可以认为是一个特例,在这个地区,各国的ARPU值低于2美元,因此通过补贴促进用户迁移可

    2G 3G 4G
  • 抢到就是赚到?小米手环5上手体验:磁吸式充电+小爱同学=独一档存在

    2020年6月11日小米通过直播发布会发布了这款最新的智能穿戴设备,通过官方所宣传的图我们能看到有很多亮点,那么我也是在第一时间拿到了这款小米手环5,那么此次升级的小米手环5究竟有哪些亮点呢

  • 小米手环5发布:磁吸式充电 售价189元起

    今日下午,小米正式发布小米手环5,标准版售价 189 元, NFC版售价 229 元, 6 月 18 日上午10: 00 全渠道开卖。据悉,小米手环 5 搭载一块1. 1 英寸动态彩显AMOLED屏,显示面积较上代增加了20%,屏幕最高亮度为450nit,并支持五档亮度调节。

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

热文

  • 3 天
  • 7天