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)里显示不够完美,总是会存在比较大或者比较小的额外空间,页面会显得很突兀。

  • 相关阅读:
    js伪数组转数组
    前端解决跨域几种方式
    mac 下node,yarn安装及版本切换
    如何给一个数组对象去重
    cookie、session、sessionStorage 、localStorage 区别
    moment.js 时间戳转换
    tp框架,addAll方法报错,返回false
    js获得 json对象的个数(长度)
    php 魔术方法和魔术常量
    js 对象的创建方式和对象的区别
  • 原文地址:https://www.cnblogs.com/kunmomo/p/11648312.html
Copyright © 2011-2022 走看看