Responsive Web Design
响应式网页设计是指运用HTML与CSS技术，通过自动调整、隐藏、收缩或放大网页元素，使网站在所有设备（包括台式机、平板电脑和手机）上都能呈现最佳视觉效果。
设置视口
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 解释：定义视口宽度，初始缩放。
响应式图片
响应式图片指能够根据浏览器尺寸自动缩放的图片素材。
<img src="" style="width: 100%">
<img src="" style="max-width: 100%; height: auto;">
根据浏览器宽度显示差异化图片
<picture>
<source srcset="" media="(max-width: 600px)">
<source srcset="" media="(max-width: 1000px)">
</picture>
响应式文本尺寸
<h1 style="font-size:10vw">响应式标题</h1>
- 通过设置
font-size: 10vw，标题的字体大小会根据视口宽度的10%自动调整。
媒体查询
<style>
.left {
background-color: #2196F3;
padding: 20px;
float: left;
width: 20%; /* The width is 20%, by default */
}
.main {
background-color: #f1f1f1;
padding: 20px;
float: left;
width: 60%; /* The width is 60%, by default */
}
.right {
background-color: #04AA6D;
padding: 20px;
float: left;
width: 20%; /* The width is 20%, by default */
}
/* Use a media query to add a break point at 800px: */
@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
</style>
响应式框架
W3.CSS
Bootstrap