要说到”响应式布局设计”,我们先来介绍一下另外一个名词:”自适应网页设计”(Responsive Web Design),最早是Ethan Marcotte在2010年提出的。指的是可以自动识别屏幕宽度、并对页面的布局会基于一定的因素搭建做出相应调整的网页设计。自适应布局能够提供一种更加实用的解决方案,使得项目的实现成本更低,并且更加易于测试。自适应布局可以被看作是响应式布局的一个更加廉价的替代品,换句话说自适应网页设计就是一个精简版的响应式布局。当固定宽度与流动宽度结合起来时,自适应就变成了响应式,响应式网页设计指的是页面的布局(流动网格、灵活的图像及媒介查询),响应式布局等于流动网格布局,而自适应布局等于使用固定分割点来进行布局。

实现方法

这里有2个关键点:如何在不修改Dom结构的前提下调整布局,如何判断屏幕分辨率并应用对应的CSS。且这两点都应该不依赖与JS。

使用CSS3 Media Queries(媒介查询)

根据不同的屏幕分辨率,选择应用不同的Css规则

基本使用

/* 当屏幕分辨率小于等于400px时,会立即套用以下样式 */
@media screen and (max-width:400px){
.class {
background:#ccc;
}
}
/* 当屏幕分辨率大于等于800px时,会立即套用以下样式 */
@media screen and (min-width:800px){
.class {
background:#666;
}
}
/* 当屏幕分辨率x>=800px和600px>=x>=520px区间时,会立即套用以下样式 */
@media screen and (max-width: 600px) and (min-width: 520px), (min-width: 800px){
.class {
background:#ff0;
}
}

link标签引入

/* 设备屏幕的输出宽度Device Width小于400px时,会立即套用style.css样式 */
<link rel="stylesheet" href="style.css" media="screen and (max-width:400px)" type="text/css">

/* 专门针对iPhone4 */
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

/* iPad 在纵向(portrait)时采用portrait.css来渲染页面;在横向(landscape)时采用landscape.css来渲染页面。 */
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" type="text/css" />

/* Android设备 */
/*240px的宽度*/
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
/*360px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" />
/*480px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />

网页添加 viewport meta 标签

在网页html head 中添加:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

该属性可以控制视窗口宽度的大小。viewport设置属性如下:

  • width:可设定数值,或者指定为 device-width

    device-width ,主要是为了让整个页面宽度与手机可视宽度相同,这样就可以简单相容于不同机型屏幕大小,如果这边width沒有设定的话,就会依照html/css给予的width当作预设值。

  • height:可设定数值,或者指定为 device-height
  • initial-scale:第一次进入页面的初始比例
  • minimum-scale:允许缩小最小比例
  • maximum-scale:允许放大最大比例
  • user-scalable:允许使用者缩放,1 or 0 (yes or no)

如果希望在不同device使用不同缩放大小,就必须使用javascript,检测UA(User agent),动态设定viewport,如下:

viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;');

流动布局

float

流动布局的含义是各个位置都是浮动的,不是固定不变的

.main { float: right; width: 70%; } 
.leftBar { float: left; width: 25%; }

float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。

flex

Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。详细内容参见css之flex布局

流式媒体

img, video, canvas {
max-width: 100%;
}

要使媒体按等比缩放,一般不需要规定媒体高度。且图片最好不用background-image,因为这样不会按照等比缩放。

其他

不使用绝对宽度

不能使用绝对宽度(margin-left:5px)的布局,也不能使用具有绝对宽度(例如:width:200px)的元素,而最好使用百分比宽度width:20%;或者with:auto;

字体单位

不使用绝度单位px,最好使用rem(参考<html>的字体大小、全局性、CSS3)、em(参考父元素的字体大小)。

html { font-size: 100%; } 
/*上面的代码指定,字体大小是页面默认大小的100%,即16像素。*/

h1 { font-size: 1.5rem; }
/*h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)*/

.small { font-size: 0.875rem; }
/*small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)*/

普通元素的栅格布局

对于普通的div布局,使用了通用简单的栅格布局,相信这个大家都知道原理:

.row{
width: 100%;
}
.row .col-1 {
width: 8.33333333333%
}

/* ...比较多,这里省略 */

.row .col-12 {
width: 100%
}

参考

转载请标注原文地址