网络推广

首页 > 网络推广 > 正文内容

网页设计中响应式具体怎么实现

襄助网络2周前 (11-07)网络推广133

响应式网页设计现在无疑是一件大事情。如果你还不了解响应式设计,可以看看我最近发表的响应式站点列表(译者注:可以好好看看示例中的网站在不同分辨率下的展现方式)。对新手来说,响应式设计可能有一点复杂,但是事实上比你想象的简单。为了帮助你迅速的了解响应式设计,我起草了一篇快速教程。你可以在3个步骤中学习到响应式设计和媒介查询(Media Queries)的基本原理(假定你了解基本的CSS知识)。

        第一步:Meta标签

大多数移动浏览器将HTML页面放大为宽的视图(viewport)以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器,使用设备的宽度作为视图宽度并禁止初始的缩放。

第二步:HTML结构

网页设计中响应式具体怎么实现

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

第三步:媒介查询-Media Queries

        CSS3 Media Query-媒介查询是响应式设计的核心。它根据条件告诉浏览器如何为指定视图宽度渲染页面。

        当视图宽度为小于等于980像素时,如下规则将会生效。基本上,我会将所有的容器宽度从像素值设置为百分比以使得容器大小自适应。

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

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

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

相关文章

网站优化过程中可能存在哪些问题

网站优化过程中可能存在哪些问题

网站优化过程中可能存在哪些问题网站优化是每一个站长都要做的,了解优化常识是每一个站长都必须具备的,当网站遇到问题该怎么解决呢接下来小编来说一些网站优化过程中可能存在哪些问题。一、打不开的网站是否会被百...

如何判断一个网站建设是否优质

如何判断一个网站建设是否优质

一个优质的网站建设应该具备以下几个方面的特点:1. 设计风格:网站设计应该符合公司的品牌形象和用户需求,具有美观、简洁、易用的特点。2. 用户体验:网站应该具有良好的用户体验,包括页面加载速度快、易于...

如何利用关键词挖掘优化内容营销策略

如何利用关键词挖掘优化内容营销策略

利用关键词挖掘可以帮助5118站长工具优化内容营销策略,从而更好地吸引目标受众和提高品牌知名度。具体而言,5118站长工具可以通过以下几个步骤来利用关键词挖掘优化内容营销策略:确定目标关键词:通过使用...

兼职做网站项目赚钱

兼职做网站项目赚钱

1、很多人说可以通过SEO来赚钱,于是各种各类的SEO培训起来了,于是N多人疯了般去参加培训,然后N多网站起来了,但是,也N多人没有赚到钱,那SEO能够赚到钱吗?答案是肯定可以的,但是学会SEO跟运用...

word文档中的域你知道怎么用吗

word文档中的域你知道怎么用吗

在前面介绍了一篇关于Word中域的知识:word文档中的域你知道怎么用吗,今天继续介绍域的技巧。三、显示域代码而非域值另一个主要选项是“显示域代码而非域值。该选项经常用于显示基层域代码,可用于诊断原因...

cn域名绑定海外主机要备案吗

cn域名绑定海外主机要备案吗

是的,CN域名绑定海外主机需要进行备案。首先,CN域名属于中国地区专用域名,无论是在国内还是海外使用,都需要遵守相关的备案规定。备案是域名注册完成后的一项必要流程,其目的是为了确保域名使用的合法性和规...

现在,非常期待与您的又一次邂逅

我们努力让每一次邂逅总能超越期待