web前端开发之几种布局方式之响应式布局

一理解几种布局的概念

1、静态布局(Static Layout)

即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分; 
意思就是不管浏览器尺寸具体是多少,网页布局就按照当时写代码的布局来布置; 
对于移动设备,单独设计一个布局,使用不同的域名如wap.或m.。

2、弹性布局

弹性布局是CSS3引入的强大的布局方式,用来替代以前Web开发人员使用的一些复杂而易错hacks方法(如使用float进行类似流式布局)。

其中flex-flow是flex-direction和flex-wrap属性的简写方式,语法如下:

flex-flow: <flex-direction> || <flex-wrap>

flex-direction: row(初始值) | row-reverse | column | column-reverse

flex-wrap: nowrap(初始值) | wrap | wrap-reverse

flex-direction定义了弹性项目在弹性容器中的放置方向,默认是row,即行内方向(一般而言是由左往右,但注意这个和书写模式有关)。

flex-wrap定义是否需要拆行以使得弹性项目能被容器包含。*-reverse代表相反的方向。

两者结合起来即flex-flow属性就确定了弹性容器在main axis和cross axis两个方向上的显示方式,下面的例子很直观的说明了各个属性值的区别:

3、自适应布局(Adaptive Layout)

自适应布局(Adaptive)的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变,但在每个布局中,页面元素不随窗口大小的调整发生变化。 
你可以把自适应布局看作是静态布局的一个系列。 
就是说你看到的页面,里面元素的位置会变化而大小不会变化;

4、流式布局(Liquid Layout)

流式布局(Liquid)的特点(也叫”Fluid”) 是页面元素的宽度按照屏幕进行适配调整,主要的问题是如果屏幕尺度跨度太大,那么在相对其原始设计而言过小或过大的屏幕上不能正常显示 
。 
你看到的页面,元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。

5、响应式布局(Responsive Layout)

做手机网站必加的一句头部(head)代码
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">  
name="viewport"   名称=视图
width=device-width 页面宽度=设备宽度(可以理解为获取你手机的屏幕宽度)
initial-scale - 初始的缩放比例  
minimum-scale - 允许用户缩放到的最小比例   
maximum-scale - 允许用户缩放到的最大比例  
user-scalable - 用户是否可以手动缩放  

分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配。 
可以把响应式布局看作是流式布局和自适应布局设计理念的融合。 
每个屏幕分辨率下面会有一个布局样式,同时位置会变而且大小也会变。

二 响应式布局步骤

1.布局及设置meta标签

当创建一个响应式网站,或者非响应式网站变成响应式的时候,首先要关注元素的布局。我在创建响应式布局的时候习惯先写非响应式布局,页面固定宽度大小,我觉得这个对在座的各位没有任何难度。如果完成了非响应式那么我在去添加媒体查询(Media Query)和响应式代码。这种操作更容易实现响应式特性。

当你完成当你已经完成了无响应的网站,做的第一件事是在你的 HTML 页面,粘贴下面的代码到和标签之间。这将设置屏幕按1:1的尺寸显示,在 iPhone 和其他智能手机的浏览器提供网站全视图浏览,并禁止用户缩放页面。

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
 
 
  • 1
  • 2
  • 3

user-scalable属性能够解决ipad切换横屏之后触摸才能回到具体尺寸的问题。

2.通过媒体查询来设置样式media query

media query 是响应式设计的核心,它能够和浏览器进行沟通,告诉浏览器页面如何呈现,假如一个终端的分辨率小于980px,那么可以这样写

 @media screen and (max-width:980px){
     #head { … }
     #content { … }
     #footer { … }
 
 
  • 1
  • 2
  • 3
  • 4


这里面的样式会覆盖掉之前所定义的样式。

3.设置多种视图宽度

假如我们要兼容ipad和iphone视图,我们可以这样设置:

/**ipad**/
@media only screen and (min-width:768px)and(max-width:1024px){}
/**iphone**/
 @media only screen and (width:320px)and (width:768px){}
 
 
  • 1
  • 2
  • 3
  • 4

3.字体设置

到目前为止,开发人员用到的字体单位大部分都是像素,虽然像素在普通网站上是Ok的,但是我们仍然需要响应式字体。一个响应式的字体应关联它的父容器的宽度,这样才能适应客户端屏幕。

css3引入了新的单位叫做rem,和em类似但对于Html元素,rem更方便使用。

rem是相对于根元素的,不要忘记重置根元素字体大小:

html{font-size:100%;}
完成后,你可以定义响应式字体:
@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:1.5rem;}}
不理解rem的童鞋,在这里给大家推荐一篇写的不错的博客(http://www.cnblogs.com/YYvam1288/p/5123272.html)
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

4.响应式设计需要注意的问题

1.宽度不固定,可以使用百分比

#head{width:100%;}
#content{width:50%;}
 
 
  • 1
  • 2

2.图片处理

在这里我给大家一把钥匙,有人会说,博主,能不能别装逼?图片处理还有啥钥匙,你以为是开门啊,博主,醒醒吧

哎哟 ,我这暴脾气,我说的钥匙不是真的钥匙,而是指图片处理的万能方法,是什么呢?就是图片液态化。接着 会有人问:“什么是图片液态化”呢?这个问题问的很好,给你打99分,多给你一分怕你骄傲,大家都知道水无形 能适合很多容器,那么假如我们把图片当做水 是不是就可以实现图片自适应问题了呢?

在html页面中的图片,比如文章里插入的图片我们都可以通过css样式max-width来进行控制图片的最大宽度,如:

#wrap img{
    max-width:100%;
    height:auto;
}
如此设置后ID为wrap内的图片会根据wrap的宽度改变已达到等宽扩充,height为auto的设置是为了保证图片原始的高宽比例,以至于图片不会失真。

除了img标签的图片外我们经常会遇到背景图片,比如logo为背景图片:

#log a{display:block;
        width:100%;
        height:40px;
        text-indent:55rem;
        background-img:url(logo.png);
        background-repeat:no-repeat;
        background-size:100% 100%;
        }
background-size是css3的新属性,用于设置背景图片的大小,有两个可选值,第一个值用于指定背景图的width,第2个值用于指定背景图的height,如果只指定一个值,那么另一个值默认为auto。
background-size:cover; 等比扩展图片来填满元素
background-size:contain; 等比缩小图片来适应元素的尺寸

最后我们来总结下响应式布局的实现原理 
首先我们应该遵循移动端优先,交互和设计以移动端为主,pc则作为移动端的扩展,一个页面需要兼容不同终端,那么有两个关键点是我们需要去做到响应式的:响应式布局和响应式内容(图片、多媒体) 
1.响应式布局 
1.Meta标签定义 
2.使用Media Queries适配对应样式 
2.响应式内容 
1.响应式图片


2、自适应布局(Adaptive Layout)

自适应布局(Adaptive)的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变,但在每个布局中,页面元素不随窗口大小的调整发生变化。 
你可以把自适应布局看作是静态布局的一个系列。 
就是说你看到的页面,里面元素的位置会变化而大小不会变化;

3、流式布局(Liquid Layout)

流式布局(Liquid)的特点(也叫”Fluid”) 是页面元素的宽度按照屏幕进行适配调整,主要的问题是如果屏幕尺度跨度太大,那么在相对其原始设计而言过小或过大的屏幕上不能正常显示 
。 
你看到的页面,元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。

4、响应式布局(Responsive Layout)

分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配。 
可以把响应式布局看作是流式布局和自适应布局设计理念的融合。 
每个屏幕分辨率下面会有一个布局样式,同时位置会变而且大小也会变。

二 响应式布局步骤

1.布局及设置meta标签

当创建一个响应式网站,或者非响应式网站变成响应式的时候,首先要关注元素的布局。我在创建响应式布局的时候习惯先写非响应式布局,页面固定宽度大小,我觉得这个对在座的各位没有任何难度。如果完成了非响应式那么我在去添加媒体查询(Media Query)和响应式代码。这种操作更容易实现响应式特性。

当你完成当你已经完成了无响应的网站,做的第一件事是在你的 HTML 页面,粘贴下面的代码到和标签之间。这将设置屏幕按1:1的尺寸显示,在 iPhone 和其他智能手机的浏览器提供网站全视图浏览,并禁止用户缩放页面。

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
 
 
  • 1
  • 2
  • 3

user-scalable属性能够解决ipad切换横屏之后触摸才能回到具体尺寸的问题。

2.通过媒体查询来设置样式media query

media query 是响应式设计的核心,它能够和浏览器进行沟通,告诉浏览器页面如何呈现,假如一个终端的分辨率小于980px,那么可以这样写

 @media screen and (max-width:980px){
     #head { … }
     #content { … }
     #footer { … }
 
 
  • 1
  • 2
  • 3
  • 4


这里面的样式会覆盖掉之前所定义的样式。

3.设置多种视图宽度

假如我们要兼容ipad和iphone视图,我们可以这样设置:

/**ipad**/
@media only screen and (min-width:768px)and(max-width:1024px){}
/**iphone**/
 @media only screen and (width:320px)and (width:768px){}
 
 
  • 1
  • 2
  • 3
  • 4

3.字体设置

到目前为止,开发人员用到的字体单位大部分都是像素,虽然像素在普通网站上是Ok的,但是我们仍然需要响应式字体。一个响应式的字体应关联它的父容器的宽度,这样才能适应客户端屏幕。

css3引入了新的单位叫做rem,和em类似但对于Html元素,rem更方便使用。

rem是相对于根元素的,不要忘记重置根元素字体大小:

html{font-size:100%;}
完成后,你可以定义响应式字体:
@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:1.5rem;}}
不理解rem的童鞋,在这里给大家推荐一篇写的不错的博客(http://www.cnblogs.com/YYvam1288/p/5123272.html)
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

4.响应式设计需要注意的问题

1.宽度不固定,可以使用百分比

#head{width:100%;}
#content{width:50%;}
 
 
  • 1
  • 2

2.图片处理

在这里我给大家一把钥匙,有人会说,博主,能不能别装逼?图片处理还有啥钥匙,你以为是开门啊,博主,醒醒吧

哎哟 ,我这暴脾气,我说的钥匙不是真的钥匙,而是指图片处理的万能方法,是什么呢?就是图片液态化。接着 会有人问:“什么是图片液态化”呢?这个问题问的很好,给你打99分,多给你一分怕你骄傲,大家都知道水无形 能适合很多容器,那么假如我们把图片当做水 是不是就可以实现图片自适应问题了呢?

在html页面中的图片,比如文章里插入的图片我们都可以通过css样式max-width来进行控制图片的最大宽度,如:

#wrap img{
    max-width:100%;
    height:auto;
}
如此设置后ID为wrap内的图片会根据wrap的宽度改变已达到等宽扩充,height为auto的设置是为了保证图片原始的高宽比例,以至于图片不会失真。

除了img标签的图片外我们经常会遇到背景图片,比如logo为背景图片:

#log a{display:block;
        width:100%;
        height:40px;
        text-indent:55rem;
        background-img:url(logo.png);
        background-repeat:no-repeat;
        background-size:100% 100%;
        }
background-size是css3的新属性,用于设置背景图片的大小,有两个可选值,第一个值用于指定背景图的width,第2个值用于指定背景图的height,如果只指定一个值,那么另一个值默认为auto。
background-size:cover; 等比扩展图片来填满元素
background-size:contain; 等比缩小图片来适应元素的尺寸

最后我们来总结下响应式布局的实现原理 
首先我们应该遵循移动端优先,交互和设计以移动端为主,pc则作为移动端的扩展,一个页面需要兼容不同终端,那么有两个关键点是我们需要去做到响应式的:响应式布局和响应式内容(图片、多媒体) 
1.响应式布局 
1.Meta标签定义 
2.使用Media Queries适配对应样式 
2.响应式内容 
1.响应式图片

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值