web前端开发之几种布局方式之响应式布局
来源:互联网 发布:项羽彭城之战 知乎 编辑:程序博客网 时间:2024/04/20 04:03
一理解几种布局的概念
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)
分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配。
可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
每个屏幕分辨率下面会有一个布局样式,同时位置会变而且大小也会变。
二 响应式布局步骤
1.布局及设置meta标签
当创建一个响应式网站,或者非响应式网站变成响应式的时候,首先要关注元素的布局。我在创建响应式布局的时候习惯先写非响应式布局,页面固定宽度大小,我觉得这个对在座的各位没有任何难度。如果完成了非响应式那么我在去添加媒体查询(Media Query)和响应式代码。这种操作更容易实现响应式特性。
当你完成当你已经完成了无响应的网站,做的第一件事是在你的 HTML 页面,粘贴下面的代码到和标签之间。这将设置屏幕按1:1的尺寸显示,在 iPhone 和其他智能手机的浏览器提供网站全视图浏览,并禁止用户缩放页面。
- 1
- 2
- 3
user-scalable属性能够解决ipad切换横屏之后触摸才能回到具体尺寸的问题。
2.通过媒体查询来设置样式media query
media query 是响应式设计的核心,它能够和浏览器进行沟通,告诉浏览器页面如何呈现,假如一个终端的分辨率小于980px,那么可以这样写
- 1
- 2
- 3
- 4
}
这里面的样式会覆盖掉之前所定义的样式。
3.设置多种视图宽度
假如我们要兼容ipad和iphone视图,我们可以这样设置:
- 1
- 2
- 3
- 4
3.字体设置
到目前为止,开发人员用到的字体单位大部分都是像素,虽然像素在普通网站上是Ok的,但是我们仍然需要响应式字体。一个响应式的字体应关联它的父容器的宽度,这样才能适应客户端屏幕。
css3引入了新的单位叫做rem,和em类似但对于Html元素,rem更方便使用。
rem是相对于根元素的,不要忘记重置根元素字体大小:
- 1
- 2
- 3
- 4
- 5
- 6
4.响应式设计需要注意的问题
1.宽度不固定,可以使用百分比
- 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 和其他智能手机的浏览器提供网站全视图浏览,并禁止用户缩放页面。
- 1
- 2
- 3
user-scalable属性能够解决ipad切换横屏之后触摸才能回到具体尺寸的问题。
2.通过媒体查询来设置样式media query
media query 是响应式设计的核心,它能够和浏览器进行沟通,告诉浏览器页面如何呈现,假如一个终端的分辨率小于980px,那么可以这样写
- 1
- 2
- 3
- 4
}
这里面的样式会覆盖掉之前所定义的样式。
3.设置多种视图宽度
假如我们要兼容ipad和iphone视图,我们可以这样设置:
- 1
- 2
- 3
- 4
3.字体设置
到目前为止,开发人员用到的字体单位大部分都是像素,虽然像素在普通网站上是Ok的,但是我们仍然需要响应式字体。一个响应式的字体应关联它的父容器的宽度,这样才能适应客户端屏幕。
css3引入了新的单位叫做rem,和em类似但对于Html元素,rem更方便使用。
rem是相对于根元素的,不要忘记重置根元素字体大小:
- 1
- 2
- 3
- 4
- 5
- 6
4.响应式设计需要注意的问题
1.宽度不固定,可以使用百分比
- 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.响应式图片
- web前端开发之几种布局方式之响应式布局
- web前端开发之几种布局方式之响应式布局
- web前端开发入门之网站布局
- 前端开发,响应式布局。
- web杂谈之响应式布局
- 移动web之响应式布局
- web前端之CSS设计指南四:响应式布局说明
- 响应式布局之-MediaQueries
- CSS3之响应式布局
- CSS3之布局(分栏布局、响应式布局)
- Web前端工程师之布局设计
- web前端之CSS布局的重要性
- 移动web开发响应式布局总结
- web前端之tab表格布局(四)----表格布局
- 响应式web布局
- Android 开发之旅:view的几种布局方式及实践
- Android 开发之旅:view的几种布局方式及实践
- Android 开发之旅:view的几种布局方式及实践
- 第七周 项目3 : 负数把正数赶出队列
- [kuangbin带你飞]专题一 简单搜索 Dungeon Master : BFS
- easyUI代码示例
- 代码重构的相关理解
- 给Java开发者的Play Framework(2.4)介绍 Part2:使用Play,Spring,JPA进行开发
- web前端开发之几种布局方式之响应式布局
- Nginx配置文件详解总结
- 利用 Linux Lab 完成嵌入式系统软件开发全过程
- git工作实录
- React Native 中组件的生命周期
- Android 客户端与服务器端时间校准
- 第7周项目5 排队看病模拟
- 详细解读Jquery各Ajax函数,$.get(),$.post(),$.ajax(),$.getJSON()
- JAVA从菜鸟【入门】到新手【实习】一一Python学习历程:游戏学Python:文字猜数游戏