响应式网页设计

article/2025/10/9 2:04:27

Responsive Web Design响应式网页设计
- 流体网格（Fluid grid）
- 弹性图片（Flexible image）
- - - srcset和sizes属性
  - SVG
  - background-size
- CSS3媒体查询（CSS3 media query）和断点
meta
渐进增强
- 过时控制工具Modernizr
- - Modernizr对象
  - 支持一系列CSS类
  - Modernizr.load和yepnope
  - 自定义扩展Modernizr
响应式设计资源
测试与优化
- 响应式测试

完整的设计各部分抽离出来，并将之转换成移动网页的标签。
用百分比技术建立布局、实现响应式图片
移动优先:开始的时候画布很小，将会在网站变宽时重获控制，而不是在网站收缩时失去控制。

补充其他：
静态布局即固定宽度布局
布局的大小不会随着用户调节浏览器窗口大小而变化
在传统PC端一般采用960px，可以被所有现代浏览器适配且能被主流屏幕宽度比例整除，移动端采用320px

Responsive Web Design响应式网页设计

单个URL实现所有入站链接打开的网页
RWD 有三大组件
流体网格（Fluid grid）
用于网页上排版网格的适配。这种技术利用了 CSS 的相对大小来保证网格及其内容在上下文里的显示保持合适的比例。e.g：Bootstrap移动设备优选的流式栅栏格系统。

栅栏系统实现响应式布局
是从桌面浏览器时代流传下来的响应式布局，主流的CSS框架诸如Blueprint、Bootstrap内置了栅栏系统

弹性图片（Flexible image）
包括使用 CSS 的 max-width 属性来让图片和其他媒体在其父元素里渲染，以及其他相关的用于避免定点样式的技巧，大小固定的样式会导致无法适配所有显示设备。
图片：包含以图片为代表的图形或者媒体元素。
CSS3媒体查询（CSS3 media query）和断点
根据页面渲染环境的物理特征使用特定的显示单位。

流体网格（Fluid grid）

Bootstrap和Foundation这两个框架都包含了独有的网格系统
– Bootstrap（https://github.com/twbs/bootstrap）
– Foundation（https://github.com/zurb/foundation）

Foundation包括：
响应式网格布局
包括slider、tab在内的导航元素
表单和按钮
用于modal pop-up和tooltip的jQuery插件

弹性图片（Flexible image）

figure{width:100%;
}figure img{width:100%;max-width: 1000px;/*不超过图片原大小，不失真*/height:auto;
/*保持居中*/display: block;margin: 0 auto;
}

srcset和sizes属性

srcset
允许开发人员指定一个图像源选项列表，供浏览器选择
属性格式：图片地址宽度描述w 像素密度描述x，多个资源之间用逗号分隔。

<img src="defalut/xx.jpg" srcset="img-URL/XX.jpg 2x,img-URL/XX.jpg 3x">

x描述符告诉浏览器只根据屏幕分辨率选择
w描述符

SVG

SVG是一种基于XML的图像格式，可以用Illustrator、PS来创建和编辑（查看浏览器是否支持）

 <object type="image/svg+xml" width="400" height="400" style="float:right" data="images/star.svg">

background-size

css3属性
在移动端使用的地方很多，最常见应用于响应性布局

length 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。（局部）
contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。(全部）

CSS3媒体查询（CSS3 media query）和断点

注意
1.将不需要根据媒体查询变化的属性放到查询之外，减少冗余
2.设置好需要的断点

媒体查询的类型
数字屏幕screen
打印页面print
所有类型all

@media screen{p{color:ReadableStream;}
}
//方法二，通过一个HTTP请求
<link rel="stylesheet" type="text/css" media="screen" href="xx.css">

此外还可根据设备给服务器发送的信息包括用户代理、设备屏幕分辨率、窗口大小、设备方向、显色指数color index提供不同的CSS规则

需要浏览器检查的表达式
max-width、orientation

@media (max-width:600px){p{color:ReadableStream;}
}
@media （pointer：coarse）{}

粗糙指针：e.g触摸屏coarse
精准指针：e.g鼠标precise

多条件关系
用，分割条件代表“或”
not非
and与

渐进增强

简单网站=>先进网站的技术

过时控制工具Modernizr

开源的 JavaScript 库，Modernizr 检测浏览器对 CSS3 或 HTML5 功能支持情况。
要在页面头部加载，并在页面加载时候运行，会在渲染页面时候提供控制

会阻碍页面渲染，因为需要在渲染之前添加HTML类，所以需要慎重。尤其像使用Backbone这样的js库时候很明显。

Modernizr对象

会创建一个Modernizr对象，对象中有所有运行着的测试的Boolean值。

<script>for(const a in Modernizr)console.log(a);</script>

输出：
在这里插入图片描述

支持一系列CSS类

提供了一系列html标签的类，e.g.svg\no-svg、用这些类去适应不同情况

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script><style type="text/css">.yes{color:green;}.no{color:red;}.svg-wrapper .no{display:none;}.no-svg .yes{display:none;}</style></head><body><div class="svg-wrapper"><span class="yes">Huzzah!  You have SVG support.</span><span class="no">BOO!  You don't have SVG support.</span></div></body>
</html>

Modernizr.load和yepnope

基于 YepNope.js ，Modernizr.load()根据一些条件判断来动态选择加载CSS和JavaScript，这无疑对避免不必要的资源加载有极大的帮助。

Modernizr.load(test: Modernizr.webgl,yep : 'three.js',nope: ['jebgl.js' ,'xx.js','xx.css']
);

自定义扩展Modernizr

Modernizr.addTest('className',function(){//检测的逻辑代码，需要返回布尔值
});

Modernizr 并非试图添加老版本浏览器不支持的功能，而是令你通过创建可选风格配置修改页面设计。它也可以通过加载定制的脚本来模拟老版本浏览器不支持的功能。

响应式设计资源

– Modernizr（https://github.com/Modernizr/Modernizr）
– Normalize CSS（https://github.com/necolas/normalize.css） • 起始项目

– HTML5 Boilerplate（https://github.com/h5bp/html5-boilerplate） • JavaScript 库
– jQuery（https://github.com/jquery/jquery）
– Backbone（https://github.com/documentcloud/backbone）

– Angular（https://github.com/angular/angular.js）
– Underscore（https://github.com/jashkenas/underscore）
– Ember（https://github.com/emberjs/ember.js）
– jQuery UI（https://github.com/jquery/jquery-ui）
– Knockout（https://github.com/knockout/knockout）

– Bootstrap（https://github.com/twbs/bootstrap）
– Foundation（https://github.com/zurb/foundation）