响应式布局与弹性布局基础篇

响应式布局与弹性布局

一.响应式布局

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)";

2-3.举个简单的例子

2-3-1.

html文件:

<!DOCTYPE html>
                 <html>
                     <head>
                         <meta charset="UTF-8">
                         <title>响应式布局</title>
                        <style>

</style>
                        <link rel="stylesheet" href="css/02-响应式布局.css" />

</head>

<body>

<div class="div1"></div>
                        <div class="div2"></div>
                  </body>
               </html>

CSS文件:

@media only screen and (min-width:900px ) {
                         body{
                                    background-color: blue;
                                 }
                        .div1{
                                  width: 50%;
                                  height: 100px;
                                  background: yellow;
                                  float: left;
                                 }
                        .div2{
                                 width: 50%;
                                 height: 100px;
                                 background: pink;
                                 float: left;
                                }
               }
              @media only screen and (max-width:900px ) {
                       body{
                                background-color: green;
                              }

.div1{

width: 100%;
                               height: 100px;
                               background: yellow;
                             }
                     .div2{
                              width: 100%;
                              height: 100px;
                              background: pink;
                             }
               }

2-3-2运行结果:

当设备宽度大于900px时

当设备宽度小于900px时

3.响应式布局例子

html文件:

CSS文件1:

运行结果:

CSS文件2:

运行结果:

CSS文件3:

运行结果:

二.弹性布局

1.弹性布局的基本概念

display:flex 具有弹性特性,任何一个容器都可以指定为Flex布局。Webkit内核的浏览器,必须加上-webkit前缀。采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。它的所有子 元素自动成为容器成员,称为Flex项目(flex item),简称"项目"。

2.flex弹性布局

2-1,了解两个基本概念

容器:需要添加弹性布局的父元素;

项目:弹性布局容器中的每一个子元素,称为项目

2-2,弹性布局的使用
            给父容器添加display:flex/inline-flex;属性,即可使容器内采用弹性布局显示,而不遵循常规文档流的显示方式;
            容器添加弹性布局后,仅仅是容器内容采用弹性布局,而容器自身在文档流中的定位方式依然遵循常规文档流;
       2-3,display:flex;容器添加弹性布局后,显示为块级元素;
               display:inline-block; 容器添加弹性布局后,显示为行级元素;
       2-4,注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。但是position属性依然生效。
       3-3,作用于容器的相关属性:
              ①flex-direction属性决定主轴的方向(即项目的排列方向)。
                 .box {
                           flex-direction: row | row-reverse | column | column-reverse;
                         }
                  row(默认值):主轴为水平方向,起点在左端。
                  row-reverse:主轴为水平方向,起点在右端。
                  column:主轴为垂直方向,起点在上沿。
                  column-reverse:主轴为垂直方向,起点在下沿。

       

②flex-wrap属性定义,如果一条轴线排不下,如何换行。

                .box{
                        flex-wrap: nowrap | wrap | wrap-reverse;
                       }
               
  nowrap(默认值):不换行,当容器宽度不够时,每个项目会被挤压
                  wrap:换行,并且第一行在容器最上方
                  wrap-reverse:换行,并且第一行在容器最下方


              
③flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

    ④justify-content属性定义了项目在主轴上的对齐方式。(此属性与主轴方向息息相关)
                   主轴方向为:row-起点在左边,
                                         row-reverse-起点在右边,
                                         column在起点上面
                                         column-reverse-起点在下面
                                         flex-start(默认值):居于主轴的起点
                                         flex-end:居于主轴的终点
                                         center: 居中
                                         space-between:两端对齐,项目之间的间隔都相等。(开头和最后的项目与父容器之间的边缘没有间隔)
                                         space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
                                         (开头和最后的项目与父容器之间的边缘有一定的间隔)
                 ⑤align-items属性定义项目在交叉轴上的排列方式。
                    .box {
                              align-items: flex-start | flex-end | center | baseline | stretch;
                            }
                               flex-start:交叉轴的起点对齐。
                               flex-end:交叉轴的终点对齐。
                               center:交叉轴的中点对齐。
                               baseline: 项目的第一行文字的基线对齐。(line-height和font-size会影响每行的基线)
                               stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度

⑥align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
                        (当项目换为多行时,可使用align-content替代justify-content)
                           flex-start:与交叉轴的起点对齐。
                           flex-end:与交叉轴的终点对齐。
                           center:与交叉轴的中点对齐。
                           space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
                           space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
                           stretch(默认值):轴线占满整个交叉轴。

时间: 2024-10-10 12:47:13

响应式布局与弹性布局基础篇的相关文章

布局的几种方式(静态布局、自适应布局、流式布局、响应式布局、弹性布局)

一.静态布局(static layout) 即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位. 1.布局特点 不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示.常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见于pc端. 2.设计方法 PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查

关于静态布局、自适应布局、流式布局、响应式布局、弹性布局的一些概念

一.静态布局(Static Layout)即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位. 1.布局特点:不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示.常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见与pc端.2.设计方法: PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅

页面布局的几种方式(静态化布局,流式布局,自适应布局,响应式布局,弹性布局)

一.静态布局(static layout) 即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位. 1.布局特点 不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示.常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见于pc端. https://developers.google.com/search/mobile-sites/mobile-seo/respon

固定布局,流动布局,弹性布局

打造无懈可击的web设计——流动布局和弹性布局 http://blog.csdn.net/qinghuawenkang/article/details/7557087 转: 自适应css布局—-流动布局新时代(译文) http://justcoding.iteye.com/blog/1825188 应运而生的web页面响应布局 http://www.zhangxinxu.com/wordpress/2011/09/页面响应布局/ 固定布局.流动布局.弹性布局哪一种适合你(上) http://ww

Flex布局【弹性布局】学习

先让我们看看在原来的学习中遇到的问题 之前在软件工程的大作业中,自己从零开始学习如何开发一个网站,从页面,到后台,当然数据库是大二的必修课 在学习如何编写一个静态页面的时候,完全是自学,自己摸索,所以遇到了很多问题,自己花费了太多时间去解决问题,今天就拿其中一个比较让我头疼的问题来引出今天的话题 当时在初识html.css的时候,遇到了水平排放的问题,当然这个一下子就查出来了,使用 float ,但是使用了 float 会使子元素脱离父元素的布局,父元素的高度会变成 0 ,从而根本展示不出来 这

静态布局、自适应布局、流式布局、响应式布局、弹性布局简析

近期学习,有很多感想,有时候看似相近的概念,其实意义却不相同.所以学习要针对不同的名词有明确的区分意识. 抽空时间,打算学习下display:flex;本以为就是一个小小的知识点,正式去研究的时候,才发现display:flex;有很多内容,能实现很多效果.比如三栏布局(左右两栏固定,中间栏自适应),圣杯布局. 后来想着经常听到流式布局,自适应布局,响应式布局,他们有什么区别呢,就去搜了许多内容查看,才发现每种布局都有优缺点和不同使用场景. 静态布局:给页面元素设置固定的宽度和高度,单位用px,

【响应式】foundation栅格布局的“尝鲜”与“填坑”

提到响应式,就不得不提两个响应式框架--bootstrap和foundation.在标题上我已经说明白啦,今天给大家介绍的是foundation框架. 何为"尝鲜"?就是带大伙初步一下foundation的灵活和强大 何为"踩坑"?就是我把我使用的时候踩过的坑给标个记号,这样大伙用的时候就可以"绕道而行"啦! 没错今天我这篇文章讲的就是北方酱左手边的那个看起来温(diao)文(de)尔(yi)雅(bi)的山羊先生:foundation!: 文章主

PC响应式、固宽布局思想

截止目前,国内绝大多数内容为主的网站(知乎,果壳,V2EX,网易新闻等)均使用内容区定宽布局,大多数电商网站(网易考拉,京东,聚美优品)也使用了内容区定宽的布局,也有些网站使用了自适应布局. 如果不明白响应式布局和自适应布局的可以去我的博客看<自适应布局和响应式布局的不同>. 1.天猫 1.内容区采用媒体查询+定宽,在达到某个断电之后改变内容区的宽度,并把某个内容进行隐藏/显示. 2.注意热门市场这里,虽然每一个方块的宽度是随着断点变化的,但是左上角的标签和里面长方形的白色区域在所有的屏幕下都

静态、自适应、流式、响应式四种网页布局有什么区别?

响应式与自适应的原理是相似的,都是检测设备,根据不同的设备采用不同的css,而且css都是采用的百分比的,而不是固定的宽度. 不同点是响应式的模板 在不同的设备上看上去是不一样的,会随着设备的改变而改变展示样式. 而自适应不会,所有的设备看起来都是一套的模板,不过是长度或者图片变小了,不会根据设备采用不同的展示样式. 流式就是采用了一些设置,当宽度大于多少时怎么展示,小于多少时怎么展示,而且展示的方式向水流一样,一部分一部分的加载. 静态的就是采用固定宽度的了.