浅谈响应式布局

CY 2019年03月11日 959次浏览

前一阵子把BootStrap系统的学习了一下,深受响应式布局的吸引,于是搜集了很多响应式布局的资料,做了一下简记。

响应式布局的演示

响应式的概念由Ethan Marcotte在2010年5月25日提出,他的文章中已经完美的讲述了什么是响应式布局的设计,并且还列举了一个不断改进的案例。

案例

没有用响应式的案例:点击查看

使用媒体查询改进过的案例:点击查看

使用媒体查询对大屏的处理:点击查看

使用媒体查询进行再进一步优化:点击查看

文章中提到了响应式布局的核心,就是媒体查询

简单的概括一下媒体查询

@media tv and (min-width: 700px) and (orientation: landscape) {
    ...
}

例如上面的代码,意味着在媒体类型为tv,可视区域不小于(min-width)700px,并且是横屏(landscape)的时候大括号中规定的CSS代码才生效。

除了上面的这种方式还支持其他的外部引入方式,例如:

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px) and (resolution: 163dpi)"
  href="shetland.css" />
@import url("shetland.css") screen and (max-device-width: 480px);

媒体查询需要在CSS中添加一个表达式,表达式返回truefalse,如果为true,表达式中的CSS将会被使用,尽管表达式为false<link> 标签指向的样式表也将会被下载(但是它们不会被应用)

逻辑操作符

and操作符用来把多个媒体属性组合成一条媒体查询,对成链式的特征进行请求,只有当每个属性都为真时,结果才为真

not操作符用来对一条媒体查询的结果进行取反

only操作符仅在媒体查询匹配成功的情况下被用于应用一个样式,这对于防止让选中的样式在老式浏览器中被应用到。

若使用了notonly操作符,必须明确指定一个媒体类型

@media not screen and (color), print and (color)
<link rel="stylesheet" media="only screen and (color)" href="example.css" />

也可以将多个媒体查询以逗号分隔放在一起;只要其中任何一个为真,整个媒体语句就返回真相当于or操作符

媒体查询的语法CSS媒体查询-伪范式

媒体属性CSS媒体查询-媒体特征

详细的媒体查询教程点击查看

除了媒体查询以外BootStrap4还使用了Flex布局这种非常舒服的弹性布局方式

Flex布局学习微信小程序Flex布局文档

viewport视口

BootStrap文档中强调要使用响应式布局要引入一个响应式元数据标签

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

这里就涉及到了视口的概念

参考文档:浅谈移动端中的视口(viewport)

有三种视口:布局视口、视觉视口、理想视口

布局视口和视觉视口.png

在移动设备查看某些网页的时候是可以缩放的,缩放的时候总有一部分在页面上就看不见了,但是那一部分看不见的他实际还是存在的,整个网页就是布局视口,手机屏幕上能看见的那一部分为视觉视口

理想视口

苹果和其他浏览器厂商引入了理想视口的概念,它对设备而言是最理想的布局视口尺寸。

一般情况下来说,理想视口无论用户怎么缩放,都不会有超出屏幕的部分,也就是没有上面布局视口中的那种情况,所以响应式只能在理想视口中表现出来,这就是为什么BootStrap要说明开头要引入响应式元数据标签

<meta name="viewport" content="width=devide-width">

下面是百度移动版网页中默认设置的视口:

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

minimum-scale 最小缩放比例

maximum-scale 最大缩放比例

user-scalable=no 禁止用户对当前页面进行缩放

更多视口的设置

断点的选择

BootStrap的断点的选择用了下面的尺寸:

参考文档

BootStrap使用的媒体查询断点

BootStrap网格中使用的断点

0-576px 超小屏幕(BootStrap默认断点)

576px-768px 小屏幕

768px-992px 中等屏幕

992px-1200px 大屏幕

≥1200px 特大屏幕

响应式中常用的长度单位

px 基本的像素

em 相对长度单位 参考父元素的font-size,如果父元素没有设置font-size,就会一直往上找,直到找到html标签为止,如果html也没有设置font-size,默认就是1em = 16px

rem 直接参照物为html标签,不会随着父元素中font-size的改变而改变,相对于em来说更加容易控制,当html标签中没有设置font-size的时候1rem = 16px,与em一致

使用相对单位长度的优点是,调整一个元素的font-size的时候,这个元素的所有使用了相对长度单位的子元素的大小,间距等方面都会跟随父元素改变,比如说使用了rem,那么调整了htmlfont-size,整个页面的单位长度都会变化。

html {
	/* 将rem的大小变为1rem=10px */
	font-size: 62.5%;
}

判断浏览器是否支持rem功能:Can I Use

媒体查询中的断点如果使用rem,永远是默认的1rem=16px,既然如此的话媒体查询使用断点的时候可以直接使用px或者em,因为rem可能会有兼容性的bug

CSS resets:Normalize.css

CSS resets用来统一标签的样式,BootStrapRebootNormalize.css都是做的CSS resets

主要的作用就是方便用户进行样式的开发,所有的元素都一视同仁没有带有特殊样式的元素。Normalize.css符合现代标准。它只针对需要规范化的样式。

对兼容性的设置

<meta http-equiv="x-ua-compatible" content="ie=edge">

以上代码告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面。

下面代码可以在用户使用了低版本的IE浏览器,给出一个友好的提示:

<!--[if lte IE8]>
做提示信息的HTML代码,一般提示信息为让用户去下载高版本的浏览器
<![endif]-->

网页设计的策略

progressive enhancement 渐进增强

参考文档:

Wiki百科-渐进增强

MDN术语表-渐进增强

graceful degradation 优雅降级

参考文档:MDN术语表-优雅降级

开发中是先做大屏幕还是先做小屏幕,这一点一般由用户群体来决定,如果用户群体手机端比较多,就先做小屏幕。

杂谈:渐进增强与优雅降级