响应式Web设计

最新推荐文章于 2021-05-05 12:40:12 发布

暒箠哓霚

最新推荐文章于 2021-05-05 12:40:12 发布

阅读量613

点赞数

分类专栏： web开发文章标签：响应式web设计兼容性网页

本文链接：https://blog.csdn.net/Zhang_HZ2016/article/details/64437585

版权

web开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、什么是 Viewport?

viewport 是用户网页的可视区域。

viewport 翻译为中文可以叫做"视区"。

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

2、设置 Viewport

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

3、什么是网格视图?

很多网页都是基于网格设计的，这说明网页是按列来布局的。

响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。

4、创建响应式网站

4.1 接下来我们来创建一个响应式网格视图。

首先确保所有的 HTML 元素都有 box-sizing 属性且设置为border-box。

确保边距和边框包含在元素的宽度和高度间。

添加如下代码：

* {

box-sizing: border-box;

}

4.2

12 列的网格系统可以更好的控制响应式网页。

首先我们可以计算每列的百分比: 100% / 12 列 = 8.33%。

在每列中指定 class， class="col-" 用于定义每列有几个 span ：

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}

4.3

所有的列向左浮动，间距(padding) 为 15px：

[class*="col-"] {

float: left;

padding: 15px;

border: 1px solid red;

}

4.4 每一行使用 <div> 包裹。所有列数加起来应为 12：

<divclass="col-3">...</div>

<divclass="col-9">...</div>

</div>

列中行为左浮动，并添加清除浮动：

.row:after {

content: "";

clear: both;

display: block;

}

例子程序：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta charset="utf-8"> 
<title>响应式网站教程</title> 
<style>
* {
    box-sizing: border-box;
}
.row:after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}
</style>
</head>
<body>

<div class="header">
<h1>Chania</h1>
</div>

<div class="row">

<div class="col-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>

<div class="col-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</div>
</body>
</html>

5、媒体查询

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

如果浏览器窗口小于 500px, 背景将变为浅蓝色：

@media only screen and (max-width: 500px) {

body {

background-color: lightblue;

}

为移动端优先设计

移动端优先意味着在设计桌面和其他设备时优先考虑移动端的设计。

这就意味着我们必须对 CSS 做一些改变。

我们在屏幕小于 768px 进行样式修改，同样在屏幕宽度大于 768px 时也需要修改样式。以下是移动端优先实例：

/* 为移动端设计: */