资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/谈谈响应式布局

谈谈响应式布局

smallStone / 427人阅读

摘要：今天在这里就略微谈一下响应式布局吧想必大家都知道响应式布局已经在这个移动端为主流的时代成为了避不开的话题之一接下来我们从小到大来谈谈响应式网页设计的基本原则为什么为什么需要响应式设计想必这点不说大家都能想到答案现在是一个移动为先的时代我们要

今天在这里就略微谈一下响应式布局吧,想必大家都知道响应式布局已经在这个移动端为主流的时代成为了避不开的话题之一,接下来我们从小到大来谈谈响应式网页设计的基本原则.

为什么?

为什么需要响应式设计,想必这点不说大家都能想到答案.现在是一个移动为先的时代,我们要是将PC端的网页照搬到移动端所行就会出现很多尴尬的情形,比如:

主要内容无法第一时间呈现的用户面前

用户需要麻烦的缩放操作才能看到页面的一小部分

手机点击无法正确点击到正确的按钮

....

这些都会对我们的用户移动体验造成不好的影响导致我们用户的流失.所以响应式网页为了解决如上的问题就出现了.

是什么

响应式网页设计(Resposive web design)也被称为RWD,或者我们称为自适应网页设计,是一种网页设计的技术做法.
虽然我们前面说到的是移动端,但是概念上,RWD目的是使网站能在多种浏览设备上阅读和导航,同时减少缩放,平移和滚动.
接下来我们开始学习下响应式网页设计中需要的知识吧.

viewport

这个是我们必须要知道的,就和下面这段html代码一样

什么是viewport?
viewport就是用户网页的可视区域,而viewport随着设备的变化,在移动端上会小于PC端.
在平板电脑和移动电话出现之前,网页值需要根据电脑屏幕设计即可,现在可就不同了,在移动端上PC端的设计会太大以至于无法适应viewport,而通常为了解决这个问题,浏览器会自动的缩小了网页并显示在移动端上.
我们之前写的那段标签又代表着什么呢?
一个标签代表着一份如何控制页面大小与缩放的说明书.width=device-width这部分就和字面意思一样将页面宽度设置为设备宽度,而initial-sacle=1.0则是设置为初始缩放比例为1.0,如果不设置将会在切换横屏时保持之前的页面宽度.

像素与DIP与pixel ratio

我们需要理解一下像素和DIP(device independent pixel,设备独立像素),假设我们有一台2560px宽的设备,如果我们DIP为1280,则我们的pixel ratio为2.我们的浏览器并不是根据物理硬件的宽度而工作的,而是根据DIP宽度工作的,它将像素与实际距离关联起来.
这部分我们就到此为止吧,稍作了解就好哦.

媒体查询(Media Query)

媒体查询(Media Query)这也是我们谈到响应式不得不谈的一部分,媒体查询是什么呢,正如我们下面所写的代码这样就是所谓的媒体查询了.
media screen and (min-width:500px) and (max-width:600px)
这里给个MDN的传送门

媒体查询的使用方式

媒体查询包含一个媒体类型和至少一个类似(max-width: 500px)限制范围表达式.在mdn上详细的介绍,在响应式布局中我们只要记住screen and ()[and ()]这种形式就可以了.

断点(Breakpoints)

在媒体查询中我们设置了不同的样式,通过不同的宽度变化来更改应用的样式,而这个样式变化的条件(临界点)就是我们这里所谈的断点了,断点的设置对于我们响应式设计是十分重要的,在这里我根据网上的资料总结一下断点如何设置.
首先,我们设计响应式网页要移动为先,意思就是我们要先设计移动端上的网页,然后再在宽度逐渐增长的情况下慢慢寻找自己心中的断点,并进一步设计宽度更大情况下的网页布局,从mobile->tablet->PC,逐步设计,也是所谓的渐进增强.

栅格设计(grid)和弹性盒(Flex box)

grid,我们最常见的一种响应式设计的模式,它将页面分割为一个个动态网格,并且在宽度变小的情况下会顺延到下一格,我们常见的使用了grid的范例如bootstrap等都十分的简单易用.
而flex box正是目前最热门的,并且被各浏览器强烈推荐的一种模式,但是在使用前首先我们要确保我们做好了各个浏览器的兼容,包含了所有版本的浏览器引擎前缀.关于flex box,可以看看我这篇博文.

怎么做?常见的模式

大体流动模型(mostlyfluid)

掉落列模型(column drop)

活动布局模型(layout shifter)

画布移除模型(off canvas)

掉落列模型(column drop)

最小视窗模式时,我们三个内容块每一个都占据一行,并且随着宽度的增加,到达断点时,则前两个内容块一起占据一行,再根据宽度增加,到达断点时,则三个内容块一起占据一行并且开始随着宽度的增加而不再延伸,从而变为增加外边距.

大体流动模型(mostly fluid)

这与掉落列模型相似,但是更像grid.
最小视窗模式时,我们内容块每个都与掉落列模型(column drop)一样每一个都占据一行,随着宽度的增加,列出现并把二三块一起占据一行,然后随着宽度的增加我们可以展示多个列,并在最后断点时,宽度固定并且随着宽度增加而增加外边距.

活动布局模型(Layout Shifter)

可以说是最灵活的布局模型,我们不是单纯的更改重排到其他列下方,而是可以更改模块的顺序.也就是使用order属性.

画布溢出模型(off canvas)

简单来说就是将不常用的导航或菜单放在画布之外,如导航栏变为按键.

实例

Column Drop
http://codepen.io/thewindswor...

Mostly Fluid
http://codepen.io/thewindswor...

Layout Shifter
http://codepen.io/thewindswor...

Off Canvas
http://codepen.io/thewindswor...

小结

以上我们已经将响应式入门的东西都谈过一遍了,大体上都能根据以上模式自己进行一些小示例的开发了,立刻动手吧.

云服务器 GPU云服务器 响应式布局 asp如何响应式布局 html响应式导布局 响应式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111691.html

相关文章

  • 实习一周，做了公司官网，谈谈关于大学生找实习工作以及记录前端响应式布局开发心得

    摘要：关于文字个人感觉使用单位结合媒体查询最好做移动端页面。这些话是勉励自己，也送给还未走出象牙塔的学弟学妹，和刚进入社会工作还在迷茫的同胞们。关于弹性布局： 　　display:flex;很好用，将元素放在一排，盒子可用宽度百分比，可替代浮动，虽然浮动也能做到，但是还要清除浮动，多此一举，还可以实现居中等布局效果，但有兼容性问题，特别是justify-content:space-between，...

    BicycleWarrior 评论0 收藏0

  • 2017年五月前端面试题目的总结

    摘要：持续心累的找工作阶段算是结束了，不同公司对面试的知识侧重点不同，整体的感受就是大公司可能更偏向一些基础或者原理布局一些经典算法方面。现将我在面试过程遇到的问题总结下。目前先传题目答案整理好之后再发布出来。 持续心累的找工作阶段算是结束了，不同公司对面试的知识侧重点不同，整体的感受就是：大公司可能更偏向一些JS基础或者原理、html布局、一些经典算法方面。小公司的面试更加侧重对经验和细节...

    warkiz 评论0 收藏0

  • 2017年五月前端面试题目的总结

    摘要：持续心累的找工作阶段算是结束了，不同公司对面试的知识侧重点不同，整体的感受就是大公司可能更偏向一些基础或者原理布局一些经典算法方面。现将我在面试过程遇到的问题总结下。目前先传题目答案整理好之后再发布出来。 持续心累的找工作阶段算是结束了，不同公司对面试的知识侧重点不同，整体的感受就是：大公司可能更偏向一些JS基础或者原理、html布局、一些经典算法方面。小公司的面试更加侧重对经验和细节...

    dreamGong 评论0 收藏0

  • 2017年五月前端面试题目的总结

    摘要：持续心累的找工作阶段算是结束了，不同公司对面试的知识侧重点不同，整体的感受就是大公司可能更偏向一些基础或者原理布局一些经典算法方面。现将我在面试过程遇到的问题总结下。目前先传题目答案整理好之后再发布出来。 持续心累的找工作阶段算是结束了，不同公司对面试的知识侧重点不同，整体的感受就是：大公司可能更偏向一些JS基础或者原理、html布局、一些经典算法方面。小公司的面试更加侧重对经验和细节...

    liangzai_cool 评论0 收藏0

发表评论

登陆后可评论

0条评论

smallStone

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<