本文介绍了响应式布局和弹性布局的基础知识。响应式布局是Ethan Marcotte在2010年提出的，旨在提供跨设备兼容的用户体验。文章详细讲解了响应式布局的概念、实现方法，包括媒体查询的使用。同时，文章还阐述了弹性布局的基本概念，如display:flex，以及如何设置容器和项目的属性来实现弹性布局效果。
响应式布局与弹性布局
一.响应式布局
1.响应式布局的概念
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。
2.响应式布局的实现
2-1.响应式布局是通过媒体查询实现的
2-2.使用媒体查询的三种方式 （与使用CSS的三种方式相结合来看）
2-2-1.直接在CSS中使用
@media 类型 （常选all/screen） and （条件1） and （条件2）{
CSS选择器{
CSS属性：属性值；
}
}
2-2-2.使用link链接CSS,media属性可以设置媒体查询方式：
<link rel="stylesheet" href="css/02-响应式布局.css" media="all and (max-width:800px)‘’/>
2-2-3. 使用impot导入，直接在url()后面使用空格，间隔媒体查询规则；
@import url("css/02-响应式布局.css") all and (max-width:800px)";
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>响应式布局</title>
<style>
</style>
<link rel="stylesheet" href="css/02-响应式布局.css" />
</head>
最低0.47元/天 解锁文章
扫一扫
3673
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
