响应式布局的实现

栏目: CSS · 发布时间: 5年前

内容简介：响应式布局，即 Responsive design，在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。但需要注意的是，响应式布局的关键不仅仅在于布局，更多的是细节需要去考虑，譬如表单的响应式设计、图片的响应式设计。当创建一个响应式网站，或者将非响应式布局改成响应式的时候，首先要关注的是元素的布局。可以先完成非响应式布局，即页面宽度是固定大小的，这样应该是没有任何难度的。在完成了非响应式后，可以通过添加媒体查询（Media Query)和响应式代

响应式布局的概念

响应式布局，即 Responsive design，在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

但需要注意的是，响应式布局的关键不仅仅在于布局，更多的是细节需要去考虑，譬如表单的响应式设计、图片的响应式设计。

响应式布局的实现步骤

当创建一个响应式网站，或者将非响应式布局改成响应式的时候，首先要关注的是元素的布局。可以先完成非响应式布局，即页面宽度是固定大小的，这样应该是没有任何难度的。在完成了非响应式后，可以通过添加媒体查询（Media Query)和响应式代码实现响应式特性。

一、设置meta标签

在完成非响应式布局后，head中添加如下代码。设置meta标签来告诉浏览器，让视口宽度等于设备宽度，而且需要禁止用户缩放行为。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">

这里视口的设置需要注意的是，视口就是可见的屏幕尺寸；设置视口时只设置宽度，而不在乎高度，这是因为高度由内容自动撑开。

二、通过媒体查询来设置样式

媒体查询（media query）是响应式设计的核心，它能够和浏览器进行沟通，告诉浏览器页面如何呈现。媒体查询，它查询的就是视口宽度，查询用户使用什么样的设备来访问的页面，知道了设备尺寸就可以调用相应的响应式代码。

那该如何写入媒体查询呢？

1、style标签中的media属性

譬如，在屏幕宽度不超过340的时候执行，背景色为红色

<style media="screen and (max-width:340px)"> 
    body{
        background:red;
        }
<style>

屏幕宽度在340到720的时候执行，背景色为蓝色，可以这样写

<style media="screen and (min-width:340px) and (max-width:720px)">　
    body{　　　　
        background:blue;
    }
</style>

可以复制以下代码进行实践，修改模拟设备的尺寸大小，显示不同背景色

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>响应式布局</title>
    <style>
        body{
            margin: 0;
        }
    </style>
    
    <style media="screen and (max-width:340px)">
        body{  background: red; }
    </style>

    <style media="screen and (min-width:340px) and (max-width:720px)">
        body{  background: blue; }
    </style>　　　　　
</head>

2、在link标签中设置media属性

通过引入外部css，也可以实现上面代码显示的效果

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>响应式布局</title>
    <link rel="stylesheet" href="720-1080.css" media="screen and (min-width:340px) and (max-width:720px)">　　　　
</head>

那在这个720-1080.css文件中只需要写

body{ background: blue; }

其实，到这一步应该能明白一些响应式布局的理念，针对不同设备尺寸编写不同样式，通过媒体查询来判断出设备尺寸类型，调用相应的样式。

3、外链css样式中的@media属性

以上内容都是将媒体查询的语句嵌在HTML中，现在都讲究模块分离的思想，所以我们也需要将媒体查询的语句写在css中，实现HTML和CSS的分离。

那么在head中写入

<link rel="stylesheet" href="720-1080.css">

那在这个720-1080.css文件中则需要这样写

@media screen and (min-width:340px) and (max-width:720px) {
    body{
        background: blue;
    }
}

三种媒体查询写法介绍完了，你一定会很好奇，代码中那些340px、720px都是如何确定。很简单，一般的设备尺寸可以百度，推荐这个网站 http://screensiz.es/phone

说一些比较常见的分辨率节点，都是以比较关键的机型的分辨率作为参考来设置。比如iPhone4、5的宽度是320px，这个节点就非常重要，它是小屏幕手机的一个分界点，一般都会在媒体查询的时候设置这个点。ipad mini的宽度是768，这代表着中型屏幕，所以第二个节点就设置为768 。

具体就可以这样写

/* iPad媒体查询的写法 */
@media only screen and (min-width:768px) and (max-width:1024px){
    ...
}

/* iPhone媒体查询的写法 */
@media only screen and (min-width:320px) and (max-width:767px){
    ...
}

如何使用媒体查询设置网页

这里所说的媒体查询设置网页不是上面所提到的实现步骤，在本文开始就有说过，响应式布局的关键在于布局，但现实情况中，存在PC端和手机端，你编写的网页是基于PC端的，去适配手机端，还是基于手机端，为了适配PC端，这是两种情况，也就对应着两种设计方案。对于媒体查询来说，就是分为从大往小写，还是从小往大写，这涉及到其他的内容，就不赘述了，可以百度响应式布局中媒体查询分辨率顺序写法。

需要注意的细节点

本文开始也说过，响应式布局的关键不仅仅在于布局，更多的是细节需要去考虑。也就是兼容性问题、字体尺寸单位、视口宽高的设置、图片的处理、表单的处理...

1、兼容性问题

IE6、IE7、IE8是不支持媒体查询的。

解决方案：css3-mediaqueries.js。引入此文件可以解决IE6-8无法实现响应式媒体查询的尴尬。

2、字体尺寸单位

css3引入了新的单位叫做rem，rem是相对于根元素的，不要忘记重置根元素字体大小

html{font-size:100%;}

完成后，就可以定义响应式字体：

@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:1.5rem;}}

3、视口宽高的设置

不同设备，不同宽度。宽度不固定，可以使用百分比。

4、图片的处理

带宽是手机端必须要考虑的问题，如果将PC端上的大图放在手机端，手机用户请求图片文件时，文件体积大，消耗流量多，请求事件长，这样的用户体验一定不好。所以就得把图片也处理成响应式的，根据终端类型尺寸分辨率来适配出合理的图形。

有两个解决方案，一个是看到有文章介绍的W3C的一个用于响应式图形的草案：新定义标签 <picture> ，因为是草案可以学习学习，这里就不赘述了，自行百度谷歌bing吧~ 另一个方案是图片液态化。

在html页面中的图片，可以通过css样式max-width来进行控制图片的最大宽度

#wrap img{
    max-width:100%;
    height:auto;
}

id为wrap内的图片会根据wrap的宽度改变已达到等宽扩充，height为auto的设置是为了保证图片原始的高宽比例，以至于图片不会失真。

除了img标签的图片外我们经常会遇到背景图片，譬如在id为logo 的 i 标签中设置背景图片

#log{
    display:block;
    width:100%;
    height:40px;
    text-indent:55rem;
    background-img:url(logo.png);
    background-repeat:no-repeat;
    background-size:100% 100%;
}

其中关键background-size可以设置的值有，cover：等比扩展图片来填满元素；contain：等比缩小图片来适应元素的尺寸。

需要注意的细节还有很多，继续学习继续积累。

Bootstrap框架实现响应式布局

利用Bootstrap中栅格系统可以简单实现响应式布局，这里就需要去理解一下啥是栅格系统

<div class="col-md-6 col-sm-6  col-xs-12"></div>

col-md-6 代表在PC端上显示在一行的6个栅栏，也就是一半。
col-sm-6 代表在平板上也显示div占当前行的一半。
col-xs-12 代表在手机端显示为当前行的百分之百填充。

确实Bootstrap的实现很简单，但是面试过程中，会有很多面试官倾向于询问自己该如何实现响应式布局，所以啊，以上的内容还是需要多加学习理解，框架只是一个工具。当然了，除了以上的方法，还有其他的响应式布局实现方式。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

大话数据结构

程杰 / 清华大学出版社 / 2011-6 / 59.00元

本书为超级畅销书《大话设计模式》作者程杰潜心三年推出的扛鼎之作！以一个计算机教师教学为场景，讲解数据结构和相关算法的知识。通篇以一种趣味方式来叙述，大量引用了各种各样的生活知识来类比，并充分运用图形语言来体现抽象内容，对数据结构所涉及到的一些经典算法做到逐行分析、多算法比较。与市场上的同类数据结构图书相比，本书内容趣味易读，算法讲解细致深刻，是一本非常适合自学的读物。本书以一个计算机教师教......一起来看看《大话数据结构》这本书的介绍吧!

码农工具