Responsive Web Design 响应式网站设计 学习笔记

Responsive Web Design makes your web page look good on all devices (desktops, tablets, and phones).
响应式网站设计使得网页在所有的设备上都能完美地显示(包括电脑,平板和手机)。
Responsive Web Design is about using CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen.
响应式网站设计使用了 CSS 和 HTML 来调整网页内容,包括 重新计算尺寸,隐藏,收缩,放大和移动。

如何实现响应式网站设计

1. 允许网页宽度自动调整

在 HTML 代码头部添加:
<meta name="viewport" content="width=device-width, initial-scale=1" />

2. 不使用绝对宽度

不使用绝对宽度,例如 width: 300px;
使用百分比相对宽度,例如 width: 20%; 或者 width: auto;

3. 使用相对大小的字体

例如 font-size: 1.5em;

4. 图片的自适应

例如 img { max-width: 100%;}

5. 使用流动布局

流动布局:各个区块的位置都是浮动的,不是固定不变的。
float 的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。

例如:

.main {
  float: right;
  width: 70%;
}
.leftBar {
  float: left;
  width: 25%;
}

7. 选择加载 CSS

自动探测屏幕宽度,然后加载相应的 CSS 文件。这里依赖于 CSS3 Media Queries。
例如:
当屏幕宽度小于 400px 时候,加载 tinyScreen.css。
当屏幕宽度在 400px 到 600px 之间时,加载 smallScreen.css。

<link rel="stylesheet" type="text/css"    media="screen and (max-device-width: 400px)"    href="tinyScreen.css" />

<link rel="stylesheet" type="text/css"    media="screen and (min-width: 400px) and (max-device-width: 600px)"    href="smallScreen.css" />

6. CSS的 @media 规则

在同一个 CSS 文件中,也可以根据不同的屏幕分辨率,选择应用不同的 CSS 规则。
例如:如果屏幕宽度小于400像素,则column块取消浮动(float:none)、宽度自动调节(width:auto),sidebar块不显示(display:none)。

@media screen and (max-device-width: 400px) {
    .column {
      float: none;
      width:auto;
    }
    #sidebar {
      display:none;
    }
  }

引用:
HTML Responsive Web Design
自适应网页设计(Responsive Web Design)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 因为有机会参与一个项目的早期设计,因此搭建的时候不可避免的遇到了如何满足响应式的问题。翻阅了《响应式Web设计:H...
    tangyefei阅读 6,475评论 2 90
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • 随着4G的普及,越来越多的人使用手机上网。移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得...
    日照明星阅读 2,447评论 0 15
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,806评论 0 2
  • 谢邀。 人永远最高估的就是自己的自制力。 就像一个瘾君子,吸毒之前永远觉得自己能靠个人的意志力克服,觉得意志力比别...
    蹒跚幸福阅读 297评论 0 0