将Adobe XD的设计稿转化为响应式 HTML 页面,需要进行如下几步:
将设计稿中的图层切成图片。
跟据设计稿中的尺寸和样式,编写 HTML 结构和 CSS 样式。
使用媒体查询,根据不同设备尺寸设置不同的样式。
以下是基本代码示例:
/* 公共样式 */
body {
margin: 0;
padding: 0;
}
/* 设计稿元素对应的样式 */
.header {
background-image: url('header.jpg');
background-repeat: no-repeat;
background-size: cover;
height: 300px;
}
.container {
padding: 20px;
}
.container h2 {
font-size: 24px;
line-height: 1.5;
}
.container p {
font-size: 16px;
line-height: 1.5;
}
.footer {
background-image: url('footer.jpg');
background-repeat: no-repeat;
background-size: cover;
height: 200px;
}
/* 媒体查询 */
@media (max-width: 768px) {
.header {
height: 200px;
}
.container {
padding: 10px;
}
.container h2 {
font-size: 20px;
}
.container p {
font-size: 14px;
}
.footer {
height: 150px;
}
}
@media (max-width: 480px) {
.header {
height: 150px;
}
.container {
padding: 5px;
}
.container h2 {
font-size: 16px;
}
.container p {
font-size: 12px;
}
.footer {
height: 100px;
}
}
这是段落内容。