8.9前端之响应设计模式
什么是响应设计模式(Responsive Web Design)
概括:
使用 CSS 和 HTML 调整大小、隐藏、缩小、放大或移动内容,以使其在任何屏幕上看起来都很好,则称为响应式 Web 设计
-
RWD 能够以可变尺寸传递网页
-
RWD 对于平板和移动设备是必需的
自己创建的实例
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<style>
.city{
float: left;
margin: 5px;
padding: 15px;
300px;
height: 300px;
border: 1px solid black;
border: 0;
}
.bcity{
float: left;
margin: 5px;
padding: 15px;
300px;
height: 300px;
border: 1px solid black;
border: 1;
}
</style>
<title>ResponsiveDesignPracticeHtml</title>
</head>
<body>
<h1>This is a PracticeDemo</h1>
<h2>Resize this Response Page!</h2>
<br />
<div class="city">
<h2>ShenZhen</h2>
<p contenteditable="false">ShenZhen is a city and it is very prosperous</p>
<p contenteditable="false">It is It is the most populous city in China</p>
</