学习日记——响应式布局

响应式的概念

        响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

        Responsive 网页设计不但要考虑其元素布局的秩序，还要做到“有求必应”，因此需要满足三个条件。

1、网站必须建立灵活的网格基础；

2、引用到网站的图片必须是可伸缩的；

3、不同的显示风格，需要在Media Query上设置不同的样式

注意：缺少任何一个功能，就不能称为是合格的Responsive 网页设计

响应式的专业术语

1、流体网格              

2、弹性图片

3、媒体查询

        媒体查询可以根据设备的尺寸，查询出适配的样式，使用这个属性可以根据用户终端设备适配对

应的样式

4、屏幕分辨率

        指的是用户使用的设备浏览web页面时的分辨率，比如智能手机浏览器，移动电脑浏览器，平板

电脑浏览器和桌面浏览器。只有知道有哪种分辨率，才能调用对应的样式。

5、主要断点：   简单来说就是设备宽度的临界点

响应式的断点

 

媒体查询

如果文档宽度小于 300 像素则修改背景颜色(background-color):

@media screen and (max-width: 300px) {

    body {

        background-color:lightblue;

    }

}

定义和使用

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。