响应式布局


媒体查询

设置 Meta 标签

在html的head标签中

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

通过媒介查询来设置样式 Media Queries

它根据条件告诉浏览器如何为指定视图宽度渲染页面。假如一个终端的分辨率小于 980px,那么可以这样写:

@media screen and (max-width: 980px) {
 #head { … }
  #content { … }
  #footer { … }
}
/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}

百分比样式


1.宽度100%,高度auto(不设置则为子元素撑开)
2.处理图片缩放的方法 图片响应式包括两个方面,一个就是大小自适应,这样能够保证图片在不同的屏幕分辨率下出现压缩、拉伸的情况;一个就是根据不同的屏幕分辨率和设备像素比来尽可能选择高分辨率的图片,也就是当在小屏幕上不需要高清图或大图,这样我们用小图代替,就可以减少网络带宽了。

  • 使用srcset
    <img srcset="photo_w350.jpg 1x, photo_w640.jpg 2x" src="photo_w350.jpg" alt="">
  • 使用background-image
  • 使用picture标签
  • 使用max-width(图片自适应):

图片自适应意思就是图片能随着容器的大小进行缩放 简单的解决方法可以使用百分比,但这样不友好,会放大或者缩小图片。那么可以尝试给图片指定的最大宽度为百分比。假如图片超过了,就缩小。 假如图片小了,就原尺寸输出。

`img { width: auto; max-width: 100%; }`
  • 用::before和::after伪元素 +content 属性来动态显示一些内容或者做其它很酷的事情,在 css3 中,任何元素都可以使用 content 属性了,这个方法就是结合 css3 的 attr 属性和 HTML 自定义属性的功能: HTML 结构:
    <img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">

css:

 `@media (min-device-width:600px) {
`img[data-src-600px] {
content: attr(data-src-600px, url);`
}
}`

` @media (min-device-width:800px) {
img[data-src-800px] {
content: attr(data-src-800px, url);
}
}`

rem布局

REM是CSS3新增的单位,并且移动端的支持度很高,Android2.x+,ios5+都支持。rem单位都是相对于根元素html的font-size来决定大小的,根元素的 font-size相当于提供了一个基准,当页面的size发生变化时,只需要改变font-size的值,那么以rem为固定单位的元素的大小也会发生响应的变化。 因此,如果通过rem来实现响应式的布局,只需要根据视图容器的大小,动态的改变font-size即可(而em是相对于父元素的)。

rem响应式的布局思想:

一般不要给元素设置具体的宽度,但是对于一些小图标可以设定具体宽度值

高度值可以设置固定值,设计稿有多大,我们就严格有多大

所有设置的固定值都用rem做单位(首先在HTML总设置一个基准值:px和rem的对应比例,然后在效果图上获取px值,布局的时候转化为rem值)

js获取真实屏幕的宽度,让其除以设计稿的宽度,算出比例,把之前的基准值按照比例进行重新的设定,这样项目就可以在移动端自适应了

rem布局的缺点:

在响应式布局中,必须通过js来动态控制根元素font-size的大小,也就是说css样式和js代码有一定的耦合性,且必须将改变font-size的代码放在css样式之前

REM布局也是目前多屏幕适配的最佳方式。默认情况下我们html标签的font-size为16px,我们利用媒体查询,设置在不同设备下的字体大小。


视口单位

css3中引入了一个新的单位vw/vh,与视图窗口有关,vw表示相对于视图窗口的宽度,vh表示相对于视图窗口高度,除了vw和vh外,还有vmin和vmax两个相关的单位。各个单位具体的含义如下:

vw 相对于视窗的宽度,1vw 等于视口宽度的1%,即视窗宽度是100vw

vh 相对于视窗的高度,1vh 等于视口高度的1%,即视窗高度是100vh

vmin vw和vh中的较小值

vmax vw和vh中的较大值

用视口单位度量,视口宽度为100vw,高度为100vh(左侧为竖屏情况,右侧为横屏情况)。例如,在桌面端浏览器视口尺寸为650px,那么 1vw = 650 * 1% = 6.5px(这是理论推算的出,如果浏览器不支持0.5px,那么实际渲染结果可能是7px)。

使用视口单位来实现响应式有两种做法:

仅使用vw作为CSS单位

搭配vw和rem


总结

响应式布局的实现可以通过媒体查询+px,媒体查询+百分比,媒体查询+rem+js,vm/vh,vm/vh +rem这几种方式来实现。
响应式布局的成型方案

现在的css,UI框架等都已经考虑到了适配不同屏幕分辨率的问题,实际项目中我们可以直接使用这些新特性和框架来实现响应式布局。可以有以下选择方案:

利用上面的方法自己来实现,比如CSS3 Media Query,rem,vw等

Flex弹性布局,兼容性较差

Grid网格布局,兼容性较差

Columns栅格系统,往往需要依赖某个UI库,如Bootstrap

响应式布局的要点

在实际项目中,我们可能需要综合上面的方案,比如用rem来做字体的适配,用srcset来做图片的响应式,宽度可以用rem,flex,栅格系统等来实现响应式,然后可能还需要利用媒体查询来作为响应式布局的基础,因此综合上面的实现方案,项目中实现响应式布局需要注意下面几点:

设置viewport

媒体查询

字体的适配(字体单位)

百分比布局

图片的适配(图片的响应式)

结合flex,grid,BFC,栅格系统等已经成型的方案

移动端视窗变动事件 (待更新)