专栏首页互联网杂技原生css写响应式网页

原生css写响应式网页

写在前面的话:随着移动设备的逐渐普及和Web技术的发展,跨端的Web开发需求将会越来越大。如何在多种设备上进行跨端的界面适配呢?我们可以利用CSS3的Media Query来实现。本文主要介绍了移动开发和CSS3结合,来进行多种分辨率适配的例子。 文中提到的响应式网页设计(Responsive web design)是一种现代网页设计方法,基于CSS3的媒介查询(Media Query)特性使得网页适应不同设备,即根据设备的分辨率和缩放自动重新布局。

----------- 译自:http://webdesignerwall.com/tutorials/responsive-design-in-3-steps 转载请注明:来自蒋宇捷的博客(http://blog.csdn.net/hfahe) 响应式网页设计现在无疑是一件大事情。如果你还不了解响应式设计,可以看看我最近发表的响应式站点列表(译者注:可以好好看看示例中的网站在不同分辨率下的展现方式)。对新手来说,响应式设计可能有一点复杂,但是事实上比你想象的简单。为了帮助你迅速的了解响应式设计,我起草了一篇快速教程。你可以在3个步骤中学习到响应式设计和媒介查询(Media Queries)的基本原理(假定你了解基本的CSS知识)。 第一步:Meta标签(查看演示) 大多数移动浏览器将HTML页面放大为宽的视图(viewport)以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器,使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。

[html] view plaincopy

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0">

IE8或者更早的浏览器并不支持Media Query。你可以使用media-queries.js或者respond.js来为IE添加Media Query支持。

[html] view plaincopy

  1. <!--[if lt IE 9]>
  2. <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
  3. <![endif]-->

第二步:HTML结构 在这个例子里,我有一个包括头部、内容、侧边栏和页脚的基本页面布局。头部有固定的高度180像素,内容容器是600像素而侧边栏是300像素。

第三步:媒介查询-Media Queries CSS3 Media Query-媒介查询是响应式设计的核心。它根据条件告诉浏览器如何为指定视图宽度渲染页面。 当视图宽度为小于等于980像素时,如下规则将会生效。基本上,我会将所有的容器宽度从像素值设置为百分比以使得容器大小自适应。

然后为小于等于700像素的视图指定#content和#sidebar的宽度为自适应并且清除浮动,使得这些容器按全宽度显示。

对于小于等于480像素(手机屏幕)的情况,将#header元素的高度设置为自适应,将h1的字体大小修改为24像素并隐藏侧边栏。

你可以根据你的喜好添加足够多的媒介查询。我在示例中仅仅展示了3个媒介查询。媒介查询的目的在于为指定的视图宽度指定不同的CSS规则,来实现不同的布局。媒介查询可以写在同一个或者单独的样式表中。

本文分享自微信公众号 - 交互设计前端开发与后端程序设计(interaction_Designer),作者:json

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-01-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • iF设计奖出炉!中国大陆企业获六项金质奖

    导读 第64届IF设计大奖日前在德国慕尼黑颁奖,来自全球59个国家和地区的5575件参赛作品从产品设计、传达设计、包装设计、服务设计等七大方面参与评审,最终,...

    前朝楚水
  • 对angular开发者的建议,设计师也有

    最近公司的项目使用angular,与ionic开发企业级软件; 现在项目越来越庞大了,我是中途加入团队,现在有时候就实现一个简单的需求,就要花费几天; 比如产品...

    前朝楚水
  • laravel—用Migration的操作数据库

    当然可以手动创建表; 据说Migration相当于是mysql的git工具,而且非常好用; 创建: php artisan make:migration cre...

    前朝楚水
  • 利用好你手里的细胞系数据发这样的6+分文章

    三阴性乳腺癌(TNBC)为乳腺癌(BC)的一种增殖和侵袭性亚型,预后不良,缺乏有效的临床靶向疗法。基因拷贝数改变(CNA)是癌症基因组中的标志,...

    科研菌
  • 年回报60%!孙正义如何经营“沉迷AI”的愿景基金?

    在软银世界大会的晚宴上,孙正义透露了愿景基金成立第一年的投资回报。当然,这是他们内部估算的数值,还未经过合规部门审查。

    量子位
  • 回忆杀:我的编程能力是如何突飞猛进

    这篇原本是我之前在知乎上的问答,当时写的比较匆忙,就没有同步,这次跃哥又进行了一小部分的润色,言简意赅地做了一小部分成长的回忆,记录那些年我的努力,寻找记忆力的...

    程序员小跃
  • 控制器到视图的传值方式

    (3)TempData        TempData实际上保存在Session中,控制器每次执行请求时都会从Session中获取TempData数据并删除该S...

    wfaceboss
  • 揭秘2018年科技创新趋势变革!

    新技术的真正价值实现不在于替代,而是整合到现有行业和技术解决方案中,从而提高整体的生产效率。 过去的十年,人类的科技创新完成了一个完整的进化周期。这个为期十年的...

    用户1310347
  • 腾讯和亚朵打造的“智慧酒店”,每一个场景都像科幻片 | 创新案例

    ? 打开电梯,刷脸就轻松进了家门; 说一声打开电视, 精彩纷呈的节目就呈现在眼前; 随手点开手机遥控,就可以调节 室内温度,灯光亮度,水温热度。 不想做饭, ...

    腾讯文旅
  • 另类“智能硬件”:纳米银抗菌奶瓶延长牛奶保质期

    镁客网

扫码关注云+社区

领取腾讯云代金券