javascript - 有哪些方式可以实现页面的自适应

问题描述

问 题

现在能想到的方法有：
1、用media实现的多媒体查询，分别写样式
2、流式布局
3、固定宽度
4、bootstrap等框架实现响应式布局
5、rem实现响应式布局
除了这些还有什么常用的方式实现响应式布局？ 或者可以说说以上几种响应式布局有哪种特别好或者不适合 欢迎大神解答 或者一起探讨

解决方案

个人认为以上的一些方法也是看场景的，不同的情况使用对应的方法, 主要还是以内容显示为主要考量。

举例: 布局移动端商品列表，左边是图右边是信息的那种。

这个就需要左侧固定大小，右侧流式布局自动适应，不能写死宽度。

关于rem的问题，以下代码觉得比较实用

<script>
        (function (doc, win) {
          var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
              var clientWidth = docEl.clientWidth;
              if (!clientWidth) return;
              docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            };

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

设计师按照750px设计效果图，实现的时候就需要移动两位数就好了。eg: 40px -> 0.4rem 100px -> 1rem

是不是感觉方便许多。。。

还得说说的就是，个人认为，真正的产品开发，一套前端代码适应几个终端是个不可取的。

举例：

• css复杂度提高了

• js操作dom 复杂度也会提高

• 对于某些html，一个dom写入三端[移动端, pad, pc]图片地址，对加载速度是很有影响的，过多的媒体查询也是这样。

这篇关于javascript - 有哪些方式可以实现页面的自适应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！