响应式布局知识点总结

本是古典何须时尚 2022-07-28 09:24 128阅读 0赞

当今屏幕分辨率从 320px (iPhone) 到 2560px (大屏显示器) 或者更大。人们也不再仅仅用台式机来浏览网页，现在有手机，平板电脑等等。所以传统的固定宽度设计形式将不再是个最佳选择，网页设计需要有自适应性。网页的布局需要能够根据不同的分辨率和设备来自动调整，以达到到最佳显示效果。接下来会展示如何运用 HTML5 和 CSS3 来设计一个自适应网页。

--------------------

## 网站布局历史 ##

table布局  
固定布局（单位使用px）  
流体布局（单位使用%）  
响应式布局（媒体查询+流体布局）

### 什么是响应式 ###

### 响应式初探 ###

一个网页可以兼容 PC、PAD 和移动端等任何一个平台，则这种网页就是响应式的设计。  
响应式设计最重要的环节就是媒体查询，我们仿造一个最为流行的 Bootstrap 框架中的媒体查询代码，具体如下：

/*当页面大于 1200px 时，大屏幕，主要是 PC 端*/
    @media (min-width: 1200px) {
    }
    
    /*在 992 和 1199 像素之间的屏幕里，中等屏幕，分辨率低的 PC*/
    @media (min-width: 992px) and (max-width: 1199px) {
    }
    
    /*在 768 和 991 像素之间的屏幕里，小屏幕，主要是 PAD*/
    @media (min-width: 768px) and (max-width: 991px) {
    }
    
    /*在 480 和 767 像素之间的屏幕里，超小屏幕，主要是手机*/
    @media (min-width: 480px) and (max-width: 767px) {
    }
    
    /*在小于 480 像素的屏幕，微小屏幕，更低分辨率的手机*/
    @media (max-width: 479px) {
    }

--------------------

## 响应式页面编写步骤 ##

### Step 1：Meta 标签 ###

为了适应屏幕，不少移动浏览器都会把 HTML 页面置于较大视口宽度（一般会大于屏幕宽度），iPhone 的 Safari 浏览器会自动缩小页面来显示，你可以使用 viewport meta 标签来设定。

以下 viewport meta 标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放：

**注意**：IE8 及其更低版本不支持 media query ，可以使用 media-queries.js 或 respond.js 脚本实现支持。

### Step 2. HTML 结构 ###

![这里写图片描述][20160413134459003]

### Step 3. Media Queries ###

CSS3 media query 是自适应网页设计的关键，他就像高级语言里的 if 条件语句，告诉浏览器根据不同的视口宽度（这里等于浏览器宽度）来渲染网页。

根据你的喜好，可以定义更多的 media queriey 条件。

--------------------

## 小知识点（但很重要） ##

### 先看看它的效果 ###

在开始之前，点击最终预览来看看它的效果。改变浏览器的宽度，你将会看到页面布局会跟着自动改变。  
![这里写图片描述][20160413140858638]

当屏幕分辨率大于 1024px 时，网页宽度将会是 980px 。用 CSS3 媒体查询（Media query）来检验屏幕分辨率，如果小于 980px ，页面宽度将会用自适应来取代固定宽度；如果小于 650px ，主题和边栏（content container and sidebar）将会撑满屏幕并一列显示。  
![这里写图片描述][20160413141017185]

### html5.js ###

请注意：使用 html5编写网页时，低于 IE9 版本 IE 浏览器并不支持`<header>`, `<article>`, `<footer>`, `<figure>`等 html5 标签，需要用 js 脚本来让它们支持。

### CSS3 媒体查询（CSS3 Media Query） ###

#### 媒体查询脚本（Media Queries Javascript） ####

IE8 或者更低的版本不支持 CSS3 媒体查询，但通过添加脚本 css3-mediaqueries.js 来实现这一功能。

#### 媒体查询 CSS（Media Queries CSS） ####

为媒体查询创建新的 CSS 样式表

### 图片的响应式 ###

为了让图片显示更加灵活，只需设置 max-width:100% 和 height:auto。  
然而 max-width:100% 和 height:auto 在IE7中运行，但不能在 IE8 中运行（诡异的 BUG 啊），所以需要为 IE8 添加 width:auto\\9

img { width: auto\9; /* ie8 */ height: auto; max-width: 100%; }

### 嵌入类视频的响应式 ###

为了让嵌入视频显示更加灵活，需要用上面同样的方法。不知道是什么原因， max-width:100% （仅仅是视频时）不能被 Safari 识别，此时要用 width:100% 代替

.video embed,.video object,.video iframe { width: 100%; height: auto; }

[20160413134459003]: /images/20220724/fb23153c24c3441f99fc182f84923a7f.png
[20160413140858638]: /images/20220724/d7ef3f7fdbf14320afcaff736ab64a5d.png
[20160413141017185]: /images/20220724/fd65b87349b64ab3983afc784d383a27.png