zoukankan      html  css  js  c++  java
  • 创建响应式布局----使用栅格

    1、Pure Grids : 创建你所需栅格系统的环境,CSS框架

    2、BootStrap

    3、Foundation:发布了一些优秀的模态、灯箱和内容滑块的解决方案;用于创建一个流式12列栅格

    4、Gridpak:根据你的输入生成栅格系统

    5、Golden Grid System:一个易于使用的18列栅格,旨在支持从小屏幕到比2560px更高分辨率的各种屏幕

    6、Frameless:处理灵活的响应式布局

    7、响应式设计具有弹性、灵活的特点;自适应布局则是固定、静态的、或者在布局上体现出严谨

    8、响应式栅格利弊:

       优点:

       A:能够使用所有可用的屏幕空间

       B:允许内容回流,并保持在各列的边界内

       C:可用于相应式图像技术,在不同大小的屏幕上

       缺点:

       A:需要付出更多努力以确保当屏幕拉伸时设计依然有效

       B:需要选择合适的图像,因此增加了维护成本

       C:试图进行灵活的设计师,他的学习曲线比较陡峭

    9、自适应栅格:

       优势:

       A:通过媒体查询,可以让你尽可能接近像素级完美的布局

       B:更容易被理解和实现

       C:避免像素冷宫--当设计在极端设备或突变点重叠区域上被破坏的情况

       缺点:

       A:浪费了大量的屏幕空间和边缘空间

       B:需要更多的突变点来填补空白

    10、在小屏幕上使用响应式设计,在大屏幕上使用自适应设计

    11、响应式与自适应:

      响应式网页设计主要针对web端,但在移动端显示的时候,能显示主内容,不会显示其他侧栏之类的,把部分内容隐藏掉,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

      A:首先,响应式和自适应最为关键的区别是什么呢?

      简而言之,响应式就相当于液体,它可以自动适应不同尺寸的屏幕,无论你的设备尺寸多么奇葩。响应式使用CSS media queries的方法,根据目标设备自动改变风格如显示类型,宽度、高度等,这能很好解决不同屏幕尺寸的显示问题。

      而自适应设计是基于断点使用静态布局,一旦页面被加载就无法再进行自动适应,自适应会自动检测屏幕的大小来加载适当的工作布局,也就是说,当你要采用自适应设计网站时,你得一个一个设计6种常见的屏幕布局。

      B:因为响应式基本上打乱了周围的内容以确保流畅符合设备窗口,你需要特别注意的是视觉层次结构设计,因为它周围的内容已被打乱

      C:如果仅仅是考虑屏幕的兼容问题,可以有把握的说,那响应式设计通常是首选技术

  • 相关阅读:
    「USACO 2020.12 Platinum」Sleeping Cows
    拉格朗日反演 (Lagrange Inversion)
    「ROI 2016 Day1」人烟之山
    「ROI 2016 Day2」二指禅
    ZJOI2016 大森林
    CF1119H Triple
    [ZJOI2016]线段树
    CF1237F
    NOI2018 情报中心
    CF1270I Xor on Figures
  • 原文地址:https://www.cnblogs.com/zhanghuiyun/p/5497810.html
Copyright © 2011-2022 走看看