这一部分内容不多,算是对响应式页面设计提供的一些小tips。内容包括:
- 利用媒体查询设置文本的对应字体大小(可以延伸到任意元素的任意属性)
- 图片的响应式呈现(利用百分比设置宽度)
- 新添加了viewport(可视区域)的内容,利用vw, vh, vmin, vmax来设置宽高
以下是这一部分习题的解答:
Introduction to the Responsive Web Design Challenges
-
1
2
3
4
5<style>
@media (max-height: 800px) {
p { font-size: 10px; }
}
</style> -
1
2
3
4
5
6
7<style>
img {
max-width: 100%;
display: block;
height: auto;
}
</style> Use a Retina Image for Higher Resolution Displays
1
2
3
4
5
6<style>
img {
width:100px;
height: 100px;
}
</style>-
1
2
3
4
5
6
7
8<style>
h2 {
width: 80vw;
}
p {
width: 75vmin;
}
</style>