响应式网页设计

习题预习

1. 什么是Responsive Web Design？
2. 哪些是创建Responsive Web Design的最佳实践？
3. 讨论Responsive Web Design的好处是什么？
4. 如何使用媒体查询在Responsive Web Design中设置不同的样式？
5. 什么是Retina Ready图像，并如何使Responsive Web Design Retina Ready？

说明知识

Responsive web design是一种设计网页的方法，可以让网页在不同的设备上（如桌面电脑、平板电脑、手机）都能自动调整以适合荧幕大小，提供更好的使用体验。

举例来说，假如某网站使用了Responsive web design，当使用者在桌面电脑上浏览网站时，网页会以荧幕宽度为基准，自动调整版面、文字大小、图片大小，让使用者可以看到更舒适的画面；而当使用者转换到平板电脑或手机上浏览同一个网站时，网页会自动根据荧幕大小进行缩放和调整，以方便使用者观看和操作，并不会因为荧幕大小而造成不良的使用者体验。这样的网站设计方式，使得网站可适应不同设备，成为现代网页开发中的重要方法之一。

条列重点

1. 可读性：让网页内容在不同尺寸的荧幕上都能够清晰、易读。

2. 调整尺寸：将网页的内容、图片、影片等元素根据荧幕尺寸进行自动调整，避免出现水平卷动条。

3. 版面设计：设计一个灵活的版面，让网站在不同的荧幕尺寸上都可以呈现出最佳排版。

4. 弹性图片：使用弹性图片（Flexible Images）、以及图片的宽度、高度限制等方式，使图片在不同屏幕上能够以最佳尺寸呈现。

5. 可变字型：适时更改字型大小和行间距等，使网站载入后更容易阅读。

6. 媒体查询：使用 CSS 媒体查询，让网页能够根据不同装置尺寸进行调适，让使用者在任何装置上都能够流畅地使用。

7. 弹性布局：使用流式布局、条形网页等方案，让网页能更加弹性地适应不同装置尺寸。

8. 推行效果：设计流畅、美观的推行效果（Transitions and Animations），增加使用者的交互感和乐观性，使网页内容更易被看到。

9. 瀑布流式：设计瀑布流式版面，使网页呈现方式更加生动有趣，也容易吸引使用者注意。

10. 结构清晰：设计网页范围、区域、内容整合等功能，让网页构造更清晰、易于查看。

知识测验

1. 如何利用媒体查询(Media Queries)在不同的装置上显示不同的背景颜色？
   答案：在 CSS 档案中，可以使用以下的程式码来实现：

@media (max-width: 767px) {
body {
background-color: red;
}
}

@media (min-width: 768px) and (max-width: 1024px) {
body {
background-color: green;
}
}

@media (min-width: 1025px) {
body {
background-color: blue;
}
}

2. 如何在 Responsive web design 中让一个元件水平置中显示？
   答案：可以在该元件外部包覆一个父元件，然后将父元件设为“text-align: center;”，该元件设置display: inline-block;。

例如，HTML 代码如下：

然后在 CSS 中进行如下设置：

.parentDiv {
text-align: center;
}

.centeredDiv {
display: inline-block;
}

3. 如何在 RWD 中使用 flexbox 布局？
   答案：使用如下的 CSS 代码：

.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}

4. 如何在不同的装置上使用不同的字型大小？
   答案：使用媒体查询(Media Queries)：

@media screen and (max-width: 480px) {
body {
font-size: 14px;
}
}

@media screen and (min-width: 481px) and (max-width: 768px) {
body {
font-size: 16px;
}
}

@media screen and (min-width: 769px) {
body {
font-size: 18px;
}
}

5. 如何在 Responsive web design 中选择适当的图片大小和解析度？
   答案：使用不同大小的图片，根据装置大小进行切换。例如，可以使用 img srcset 属性设置多个图片尺寸和解析度，这样浏览器可以根据装置屏幕大小选择最适合的图片。代码如下：

这段代码会在装置宽度小于 480px 的情况下显示 image-small.jpg，在 480-768px 之间的装置上显示 image-medium.jpg，在宽度大于 768px 的情况下显示 image-large.jpg。sizes 属性指定图片在不同装置大小下的显示尺寸。