zoukankan      html  css  js  c++  java
  • 你不知道的css各类布局(三)之自适应布局

    自适应布局

    概念

    自适应布局(Adaptive Layout)是对凡是有自适应特性的一类布局的统称

    自适应布局使用media query来检测当前浏览器的宽度进而通过CSS样式调整页面大小。自适应布局和静态布局类似也是采用绝对长度单位(px、pt、mm、cm、in),但不同点在于它通过media query为页面指定了多个固定宽度。

    布局特点

    自适应布局的特点是分别为不同的屏幕分辨率定义布局,即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围。

    改变屏幕分辨率可以切换不同的静态局部(页面元素位置发生改变),但在每个静态布局中,页面元素的位置会变化但是大小不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。

    屏幕分辨率变化时,页面里面元素的位置会变化而大小不会变化。

    设计方法

    使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在同一个设备下实际还是固定的布局。(媒体查询 + 静态布局)

    实例

    注意 max-width:代表小于等于,min-width代表大于

    优点

    在对原始的静态布局页面升级时(比如支持手机端),自适应布局就是一种很好的折中方案。这要比直接重构为响应式的容易的多。

    缺点

    在不同的breakpoint(可以理解为分界点但,比如上面例子中的768, 769,1024,1025)里显示不够完美,总是会存在比较大或者比较小的额外空间,页面会显得很突兀。

  • 相关阅读:
    vue-cli element axios sass 安装
    Rem-- ui图与适配手机的px换算
    REM
    Canvas画半圆扇形统计图
    在vue中安装SASS
    在vue中引用.SCSS的公用文件
    Echart--折线图手柄触发事件
    vue 脚手架webpack打包后,解决能看到vue源码的问题
    js 函数 /变量/ 以及函数中形参的预解析的顺序
    【算法日记】4.递归和快速排序
  • 原文地址:https://www.cnblogs.com/kunmomo/p/11648312.html
Copyright © 2011-2022 走看看