资讯专栏INFORMATION COLUMN

浅析RWD

0x584a / 3371人阅读

摘要:三响应式网页设计的基本原理标签,允许页面宽度自动调整大多数移动浏览器将页面放大为宽的视图以符合屏幕分辨率。解决方案使用,选择器清除浮动,只适用于非浏览器。由于移动设备屏幕大小的限制,在其上进行显示的内容一般是经过精心筛选的。

一、前言

现今,无论是移动设备、平板电脑、PC,屏幕大小各不相同,若是针对每个屏幕大小多带带设计一个解决方案,则会大幅增加网站建设的复杂程度和运营成本。响应式网页设计的概念就是可以让网页根据用户的使用环境进行自动调整,有效的改善用户体验。

响应式网页设计是什么?

响应式网页设计(Responsive Web Design,通常缩写为 RWD),又称为自适应网页设计、回应式网页设计。是一种现代网页设计方法,该设计基于 CSS3 的媒介查询(Media Query)特性使得网页适应不同设备,即根据设备的分辨率和缩放自动重新布局,同时减少缩放、平移和滚动。

二、响应式网页设计(RWD)的元素

流动网格(Fluid Grids),灵活的图片(Flexible Images)和媒体查询(Media Queries)是对于响应式网页设计的三种技术元素,但它们也是需要不同想法的方式。

流式网格:概念要求页面元素使用相对单位如百分比或字体排印学调整大小,而不是绝对的单位如像素或点;

灵活的图片:也以相对单位调整大小(最大到 100%),以防止它们显示在包含它们的元素外面;

媒体查询:允许网页根据访问站点设备的特点而使用不同 CSS 样式规则,最常用的是浏览器的宽度。

三、响应式网页设计(RWD)的基本原理 3.1 meta 标签,允许页面宽度自动调整

大多数移动浏览器将 HTML 页面放大为宽的视图(viewport)以符合屏幕分辨率。你可以使用视图的 meta 标签来进行重置。在 标签里加入这个 meta 标签。


所有主流浏览器都支持这个设置,包括 IE9。对于那些老式浏览器(主要是 IE6/7/8)并不支持 Media Query。你可以使用 media-queries.js 或者 respond.js 来为 IE 添加 Media Query 支持。





注意:很多人使用 initial-scale=1.0 到非响应式网站上,这会让网站以 100% 宽度渲染,用户需要手动移动页面或者缩放。如果和 initial-scale=1.0 同时使用 user-scalable=nomaximum-scale=1.0,则用户将不能放大/缩小网页来看到全部的内容。

了解更多:常用meta整理 – SegmentFault

3.2 不使用绝对宽度

由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。

/* CSS 代码不能指定像素宽度 */
#header {
  width: 1024px;
}

/* 只能指定百分比宽度 */
#header {
  /* 设定对象的宽度占父元素 100% */
  width: 100%;
}

/* 或者实际宽度 */
#header {
  /* 根据对象实际大小自适应宽度 */
  width: auto;
}
3.3 相对大小的字体

字体也不能使用绝对大小(px),而只能使用相对大小(em)。

注意1em = 16px

body {
  /* 字体大小是页面默认大小的 100%,即 16 像素 */
  font: normal 100% "Microsoft YaHei",Arial,Helvetica,sans-serif;
}

h1 {
  /* h1的大小是默认大小的 1.5 倍,即 24 像素(24 / 16 = 1.5) */
  font-size: 1.5em;
}
3.4 流式网格

各个区块的位置都是浮动的,不是固定不变的。

#main {
  width: 100%;
}

#content {
  float: left;
  width: 75%;
}

#sidebar {
  float: left;
  width: 25%;
}

浮动的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向 overflow(溢出),避免了水平滚动条的出现。

3.5 灵活的图片

除了布局和文本,RWD 还必须实现图片的自动缩放。

img {
  max-width: 100%;
}
3.6 媒体查询,CSS 的 @media 规则

同一个 CSS 文件中,也可以根据不同的屏幕分辨率,选择应用不同的 CSS 规则。

/* 当屏幕宽度小于 768 像素时,
content 块宽度为 100%(width: 100%),sidebar 块不显示(display: none) */
@media screen and (max-width: 768px) {
  #content {
    width: 100%;
  }

  #sidebar {
    display: none;
  }
}
四、做响应式网页设计(RWD)常遇到的几个问题 4.1 既使用 width: 100%; 又使用固定的 padding-leftpadding-right 时,宽度超出设备屏幕

例如:

#header {
  padding: 0 200px;
  width: 100%;
  height: 50px;
  background: #fff;
}

解决方案:为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。在 #header 中加入 CSS3 box-sizing 属性,将其属性值置为 border-box

#header {
  box-sizing: border-box;
  padding: 0 200px;
  width: 100%;
  height: 50px;
  background: #fff;
}

让所有的元素都使用 border-box,并且包括伪类 :before:after

*, *:before, *:after {
  box-sizing: border-box;
}
4.2 图片等比例放大、缩小

1)背景图像(CSS background 属性)

解决方案:巧妙运用 padding-bottom 或者 padding-top。比如一张照片分辨率为 1440 × 552,那么 padding-bottom 或者 padding-top 的值为(宽 ÷ 长)× 100% = 38.333333% 。

#showcase {
  padding-bottom: 38.333333%;
  width: 100%;
  height: 0;
  background: url(../images/showcase.jpg) no-repeat center center / cover;
}
2)网页上链接图像(HTML 标签)

例如:

解决方案 1 :巧妙运用 CSS max-height 属性,定义元素的最大高度值。

#showcase img {
  width: 100%;
  max-height: 552px;
}

解决方案 2 :运用 height: auto;,根据块内内容自动调节高度。

#showcase2 img {
  width: 100%;
  height: auto;
}

解决方案 3 :该方案与背景图像运用的方案相似,不过没用 CSS position 属性的话,高度增加一倍。

#showcase3 {
  position: relative;
  padding-bottom: 38.333333%;
  width: 100%;
  height: 0;
}

#showcase3 img {
  position: absolute;
  width: 100%;
  height: 100%;
}
4.3 文本超出指定宽度后用省略号代替

例如:h1 不换行,文本超出部分用省略号代替。

解决方案

h1 {
  word-break: keep-all; /* 不换行 */
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
  text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...);需与 overflow: hidden; 一起使用。*/
}
4.4 清除浮动

例如:父元素的高度无法被撑开,影响与父元素同级的元素;与浮动元素同级的非浮动元素会跟随其后;若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构。

解决方案 1 :让下一个块也浮动。

解决方案 2 :使用空标签清除浮动。在所有浮动标签后面添加一个空标签,定义 CSS clear:both; 不过增加了无意义标签使 HTML 结构看起来不够简洁。

解决方案 3 :使用 overflow,给包含浮动元素的父标签添加 CSS 属性 overflow: auto; zoom: 1;zoom: 1; 用于兼容 IE6。

#parent {
  overflow: auto;
  zoom: 1;
}

解决方案 4 :使用 :before:after 选择器清除浮动,只适用于非 IE 浏览器。使用中必须设置 height: 0;,否则该元素会比实际高出若干像素。

#parent:before, #parent:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

#parent:after {
  clear: both;
}

#parent {
  zoom: 1; /* 兼容IE < 8 */
}

/* 或者 */
#parent:before, #parent:after {
  content: "";
  display: table;
}

#parent:after {
  clear: both;
  overflow: hidden;
}

#parent {
  zoom: 1; /* 兼容IE < 8 */
}
4.5 DIV 互换

例如:有三个 DIV(如下图,分别为红、黄、蓝),当分辨率较小时,三个 DIV 重新排列,排列顺序变为黄、红、蓝

解决方案

#posts {
  position: relative;
  width: 100%;
}

.post {
  position: absolute;
  float: left;
  width: 33.333333%;
  height: 200px;
}

.post1 {
  margin-left: 0%;
  background: red;
}

.post2 {
  margin-left: 33.333333%;
  background: yellow;
}

.post3 {
  margin-left: 66.666666%;
  background: blue;
}

@media screen and (max-width: 678px) {
  .post {
    width: 100%;
  }

  .post1 {
    margin-top: 200px;
    margin-left: 0%;
  }

  .post2 {
    margin-top: 0;
    margin-left: 0%;
  }

  .post3 {
    margin-top: 400px;
    margin-left: 0%;
  }
}

补充:也可以换个思维,先做低于 678 px,再做高于 678 px

五、优秀(RWD)网站 5.1 有关制作 RWD 文章推荐

18个详细响应式网页设计教程 – OPEN资讯

响应式网页设计-腾讯ISUX

进步博客 | 关注信息无障碍!

Media Queries

5.2 优秀 RWD 网站

首页-Suwen

Studio Lovelock

Melanie Daveid

Esquire

六、总结

一个网站若是没有良好的用户体验,即便有诱人的内容也无法很好的吸引用户。响应式设计虽然可以合理的呈现给我们想要的内容,但并不是将整个网页完美的缩放给我们。由于移动设备屏幕大小的限制,在其上进行显示的内容一般是经过精心筛选的。过多的内容会使页面看起来杂乱不堪,用户也很难找到自己想要的东西。

比较好的做法是留下少部分最重要的内容直接进行展示,其余的部分可以先隐藏起来,用户点击时再展开。这样信息都保留在了页面上,但是不要一次性的全都推到用户面前,用户可以按需索取想要了解的内容。对于移动设备流量上的考虑,可以设计成 AJAX 模式,而不是预先加载所有的页面数据,这样可以节省一部分的流量。

把握好“宽度位置样式”,响应式网页设计(RWD)就不难了。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/115127.html

相关文章

  • 浅析RWD

    摘要:三响应式网页设计的基本原理标签,允许页面宽度自动调整大多数移动浏览器将页面放大为宽的视图以符合屏幕分辨率。解决方案使用,选择器清除浮动,只适用于非浏览器。由于移动设备屏幕大小的限制,在其上进行显示的内容一般是经过精心筛选的。 一、前言 现今,无论是移动设备、平板电脑、PC,屏幕大小各不相同,若是针对每个屏幕大小单独设计一个解决方案,则会大幅增加网站建设的复杂程度和运营成本。响应式网页设...

    _Dreams 评论0 收藏0
  • css居中那些事

    摘要:一垂直居中适用于单行文本居中多对象的垂直居中技巧立马来看实际完成的精美相册效果效果吧別忘了拖拉一下窗口看看效果喔负值立马来看实际完成的精美相册效果效果吧別忘了拖拉一下窗口看看效果喔立马来看实际完成的精美相册效一、css垂直居中 1.line-height(适用于单行文本居中) eg: html:123- css: .wordp{width:100px;line-heig...

    番茄西红柿 评论0 收藏0
  • Java IO : RandomAccessFile

    摘要:,除了具有的特点外,这个模式要求对文件内容和文件元数据的每一个更新都会同步更新至底层的物理存储。 RandomAccessFile概览 对文件的读取,既可以按顺序,也可以以任意顺序来读取。RandomAccessFile提供这样一种功能。其保存一个指向当前文件位置的指针,可以通过调整指针的位置,读取一个文件中任意的内容。通过一段简单的代码来有个大体的认识: RandomAccessFi...

    miracledan 评论0 收藏0
  • 最流行的5个前端框架对比

    摘要:是目前可用框架中无可争议的领导者。框架大小预处理器和响应式布局是模块化是启动模板布局是图标集设置附加附件无捆绑,许多第三方插件可用。是排在第二名的框架。是一个语义化设计的前端开源框架。 如今出现了大量的CSS前端框架,但真正优秀的框架只有少数几个。 本文将会比较其中五个最佳的框架。每个框架都有自己的优点和缺点,以及具体的应用领域,你可以根据自己的具体项目需求进行选择。此外,许多选项都是...

    coordinate35 评论0 收藏0
  • CSS团队协作规范

    摘要:的命名必须是行为有语意的。前端工程师拿到视觉图,开始写时以手机版为第一优先。手机开启网页很吃手机效能和网络状况,前端工程师一开始就以手机版为优先,可以让一开始载入,使用最少的效能快速载入网页。 命名禁止缩写 精简扼要地对class命名,请勿使用自定义缩写。 class name的命名必须是行为、有语意的。 禁止在非特殊情况下写!important CSS本身有权重设计,任意地使...

    firim 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<