响应式布局

    关于响应式布局,我的理解是:html5/css3响应式布局是利用css3的media媒体查询功能。移动端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局的媒体查询media兼容问题。

    一个普通的自适应显示的三栏网页,当你用不同的终端来查看这个页面的时候,他会根据几种终端来显示不同的样式,在电脑上是三列,在pad上应该也是 三列,在大屏手机上是三行,在屏幕小于320的手机上只显示主要内容,隐藏掉了次要元素。(这里关于响应式布局还有个比较好的消息,就是拖动浏览器也可以 触发判断条件,测试的时候你不需要去找一堆手机,只要把自己的浏览器窗口缩小到一定尺寸就可以了。)

    1.通过不同的媒介类型和条件定义样式表规则。媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。媒介查询的大部分媒介特性都接受minmax用于表达大于或等于小于或等于。如:width会有min-widthmax-width媒介查询可以被用在CSS中的@media上,也可以被用在HTML中。通过这个标签属性,我们可以很方便的在不同的设备下实现丰富的界面,特别是移动设备,将会运用更加的广泛。

    2.通过使用百分比也可以实现响应式布局,这是一种比较简单的方法,一般只需要使用百分号做出其相应的比度就可以实现响应式的一种方法。

    3.通过使用弹性盒子也可以做出响应式布局,在CSS3中的弹性盒子可以很轻松的创建出一些自适应浏览器流动窗口的布局或者是自适应字体大小的布局。当容器的尺寸由于屏幕大小或者窗口尺寸发生变化时,里面的一些条目或者标签也会被动态地调整。弹性盒子布局并没有内向的方向限制,可以完全由自己调试大小。

    通过用户研究,了解用户使用的设备分布情况,确定需要兼容的设备类型、屏幕尺寸。

    设备类型:包括移动设备、手机、平板、和pc端。

    屏幕尺寸:包括各种手机屏幕的尺寸(包括横向和竖向)、各种平板的尺寸(包括横向和竖向)、普通电脑屏幕和宽屏。

  需要考虑的问题:

  • 某个页面进行响应式设计时其适用的尺寸范围是哪些?比如,1688搜索结果页面,跨度可以从手机到宽屏,而1688首页,由于结构过于复杂,想直接迁移到手机上,不太现实,不如直接设计一个手机版的首页。
  • 结合用户需求和实现成本,对适用的尺寸进行取舍。比如一些功能操作的页面,用户一般没有在移动端进行操作的需求,没有必要进行响应式设计。

    针对确定下来的几个尺寸分别制作不同的线框原型,需要考虑清楚不同尺寸下,页面的布局如何变化,内容尺寸如何缩放,功能、内容的删减,甚至针对特殊的环境作特殊化的设计等。

    以上就是我本人对响应式布局的一些理解。

    

    

    

原文地址:https://www.cnblogs.com/xkweb/p/5823410.html