前一阵子把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
中添加一个表达式,表达式返回true
和false
,如果为true
,表达式中的CSS
将会被使用,尽管表达式为false
,<link>
标签指向的样式表也将会被下载(但是它们不会被应用)
逻辑操作符
and
操作符用来把多个媒体属性组合成一条媒体查询,对成链式的特征进行请求,只有当每个属性都为真时,结果才为真。
not
操作符用来对一条媒体查询的结果进行取反。
only
操作符仅在媒体查询匹配成功的情况下被用于应用一个样式,这对于防止让选中的样式在老式浏览器中被应用到。
若使用了not
或only
操作符,必须明确指定一个媒体类型。
@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)
有三种视口:布局视口、视觉视口、理想视口
在移动设备查看某些网页的时候是可以缩放的,缩放的时候总有一部分在页面上就看不见了,但是那一部分看不见的他实际还是存在的,整个网页就是布局视口,手机屏幕上能看见的那一部分为视觉视口
理想视口
苹果和其他浏览器厂商引入了理想视口的概念,它对设备而言是最理想的布局视口尺寸。
一般情况下来说,理想视口无论用户怎么缩放,都不会有超出屏幕的部分,也就是没有上面布局视口中的那种情况,所以响应式只能在理想视口中表现出来,这就是为什么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
的断点的选择用了下面的尺寸:
参考文档
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
,那么调整了html
的font-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
用来统一标签的样式,BootStrap
的Reboot
和Normalize.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
渐进增强
参考文档:
graceful degradation
优雅降级
参考文档:MDN术语表-优雅降级
开发中是先做大屏幕还是先做小屏幕,这一点一般由用户群体来决定,如果用户群体手机端比较多,就先做小屏幕。