响应式Web设计

Bertha 。 2022-09-30 09:57 217阅读 0赞

**1、什么是 Viewport?**

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

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

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

**2、设置 Viewport**

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

<metaname="viewport"content="width=device-width, initial-scale=1.0">

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

**3、什么是网格视图?**

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

![Center][]

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

![Center 1][]

响应式网格视图通常是 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="row">

<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">

5、媒体查询

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

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

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

body \{

background-color: lightblue;

**为移动端优先设计**

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

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

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

/\* 为移动端设计: \*/

\[class\*="col-"\] \{

width: 100%;

@media only screen and (min-width: 768px) \{

/\* For desktop: \*/

.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%;\}

**方向：横屏/竖屏**

结合CSS媒体查询,可以创建适应不同设备的方向(横屏landscape、竖屏portrait等)的布局。

**语法：**

orientation：portrait | landscape

*  **portrait：**指定输出设备中的页面可见区域高度大于或等于宽度
 *  **landscape：** 除portrait值情况外，都是landscape

**实例**

如果是竖屏背景将是浅蓝色：

@media only screen and (orientation: landscape)  \{

body \{

background-color: lightblue;

[Center]: /images/20220706/cb922ae3493d419a8b303ec835fa806f.png
[Center 1]: /images/20220706/29179acf671a4361b622ce8072006ed6.png

响应式Web设计

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关【响应式Web前端设计】HTML DOM padding 属性

相关【响应式Web前端设计】Register Demo

相关【响应式Web前端设计】Login Demo

相关【响应式Web前端设计】CSS 定位详解

相关响应式Web设计

相关学习响应式设计

相关响应式设计三部曲

相关响应式设计

相关关于响应式web设计

相关自适应网页设计/响应式Web设计