响应式与自适应布局是什么

原创已于 2023-09-15 12:06:24 修改 · 179 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3

于 2023-06-30 15:51:21 首次发布

css 专栏收录该内容

4 篇文章

订阅专栏

文章介绍了响应式设计的概念，旨在确保web程序在不同设备上展示良好。它涉及到rem单位、媒体查询以及CSS3的flex和grid布局。同时，文章讨论了自适应布局在PC端的应用，包括使用百分比、vw/vh单位以及scale和zoom技术来适应不同屏幕尺寸，但同时也指出这些方法的优缺点和潜在问题。

响应式是可以针对不同的平台设备，如手机，电脑可以展示为不同的布局，效果。
自适应是针对一端设备，如针对不同的电脑屏幕尺寸，适应不同的屏幕尺寸，但是布局一般不会改变。

自适应

移动端

rem单位

为了使一个web程序应对不同大小的屏幕，而不至于大批量的重新实现效果，提出来响应式的思想。
屏幕小到手机、手环，大到电脑、大屏。除了确定的设计目标,其他场景考虑响应式很有必要。
对于不同设备的屏幕，需要考虑的比较多，可以使用rem与px转换获得好的效果。
对于不同的电脑屏幕。如1200-1800px，可以媒体查询进行改变布局。一些样式库使用媒体查询进行响应式实现。(缺点：只有在屏幕到达断点时才会变化)。

//如当屏幕>750px时,1rem为10px
(function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      if (clientWidth >= 750) {
        docEl.style.fontSize = '10px';
      } else {
        docEl.style.fontSize = 10 * (clientWidth / 750) + 'px';
      }
    };

  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

现代响应式：css3提供了多种布局方式，如flex弹性盒布局、grid网格布局，可以使用对应属性方便的实现一些响应式效果。(缺点：兼容性)
新的单位：相对于视口的单位vm/vw。会随着窗口大小而变化(简单来说就是缩放无效)

设置视口宽度为屏幕宽度
<meta name="viewport" content="width=device-width,initial-scale=1">

PC端自适应

pc端的一般来说，使用%或者vw作为单位进行布局比较好，但是在开发过程中会比较困难。

scale缩放适应

对整个body使用scale缩放，以屏幕宽度或高度进行缩放，适应屏幕的宽度或高度。
缺点：scale缩放仍会占据原来空间，需要进行定位调整；scale缩放可能会导致页面小的文字或图片变得模糊。
下面是以宽度为基准,保证页面不出现横向滚动条的自适应设计:
实现：首先根据开发时的设计图，和实时的屏幕尺寸，计算出缩放比例。然后对其使用定位，调整至左上角，设置超出屏幕的部分不可见。
代码：

// 首先给元素添加一下样式
#app {
  width: 1905px; //设计图宽度
  overflow-x: hidden;
  height: fit-content;
  position: absolute;
  top: 0%;
  left: 50%;
  transform:translate(-50%, -50%);
}
//width为基准,height为app的浏览器中渲染的高
function setCalc(width = 1920, height = 1000) {
  // width,height 为app元素宽高保持的比例
  // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
  //只以宽度为基准,保证不出现
  const scaleX = document.documentElement.clientWidth / width
  //可以也计算高度,根据需求使用最小的为基准
  // const scaleY = document.documentElement.clientHeight / 1080
  const app = document.getElementById('app')
  app.style.transform = `translateZ(0) translate(-50%, -50%) scale(${scaleX})`;
  // 缩放之后距顶部距离 动画有延迟,会推迟到下一个操作
  // let top = $('.gtitle').offset().top - $(window).scrollTop();
  //直接计算缩放后距顶部距离  
  //height为app的浏览器中渲染的高
  document.getElementById('app').style.top = height * scaleX / 2 + 'px';
}

//每次窗口大小变化,需要重新计算
// 防抖优化
window.onresize = _.debounce(function () {
  let height = document.querySelector('#app').clientHeight,
  setCalc(1905, height)
}, 100)

以上方法只能保证水平方向上适应，当想要垂直方向上适应，不出现滚动条时，会导致水平方向上部分被截断隐藏

zoom缩放垂直适应

zoom适用于适应pc端不同设备，如显示器，笔记本等不同尺寸。只需要在初始化的时候计算一下不出现滚动条即可。频繁使用zoom性能消耗可能很大。
缺点：
0.zoom在firefox浏览器中无效
1.zoom相对于页面左上角缩放，它可以改变元素缩放后所占据的空间，所以会引起页面重绘。
2.由于zoom缩放改变元素占据空间，所以若是布局不做弹性或适应处理，只会使元素位于左上角。
3.zoom缩放后的最小字号为12像素，也就是说，即使你把页面做小了100倍，字体最小也会是12px，也由于这个原因，当缩小幅度大时，会影响页面缩放后的布局错乱。
实例：适应一定pc端不同屏幕尺寸，如显示器，笔记本等。使初始访问其不出现垂直滚动条

  <style>
    body {
      width: 100%;
      //保证缩放后仍然充满整个屏幕
      height: 100%;
      background-color: #f5f7f9 !important;
      display:flex;
    }
    //左右侧固定
    .left,.right{
	  flex:0 ,0 ,100px
	}
  </style>
  <body>
  <div class="left"></div>
  <div class="middel"></div>
 <div class="right"></div>
    <script>
    const StandWidth = 1920, StandHeight = 960;
    let curHeight = document.documentElement.clientHeight;
    const zoom = curHeight / StandHeight;
    //缩放整个body以适应屏幕
    document.body.style.zoom = zoom;
  </script>
  </body>