rem移动端设计方案

最新推荐文章于 2024-04-05 13:49:27 发布

y_programmer_ape

最新推荐文章于 2024-04-05 13:49:27 发布

阅读量304

点赞数 1

文章标签： javascript css html html5 chrome

本文链接：https://blog.csdn.net/y_programmer_ape/article/details/106650946

版权

本文介绍了一种基于REM单位的响应式布局方案，适用于所有移动端设备。通过设置html的font-size为动态值，使布局随屏幕大小变化而自适应。利用Flex布局替代传统百分比和浮动布局，实现更简洁的代码结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

rem设计方案

原理和思路

一套代码一个布局适应所有移动端

<meta name = "viewport" content = "width=device-width, initial-scale = 1.0,minimum-scale = 1.0,maximum-scale = 1.0,user-scalable = no">
//user-scalable = no 禁止用户手指头放大缩小

以一个简单iPhoneX移动端界面为例

下面是需要注意的几点

1.以最大像素为基础，720px，那么所有移动端屏幕都可以适用
2.整体布局默认不设置宽度，默认100%自动填满
3.父元素一般不设置高度，由子元素撑起来
4.移动端不考虑放大，考虑缩小
5.图片只设置width:100%,其余不用设置，自适应盒子的大小
6.文字依然以rem为单位，等比例的放大，缩小
html的font-size 设置为整数，比较好计算例如：50px 100px

7.所有的布局均使用flex布局来用,不再使用width百分比，float布局了

下面是一段用来配合rem做移动端适配的js函数代码

    // 立即执行函数
    // 做移动端适配 配合rem
    // 找到最大尺寸720px
    // 当大于720px html的font-size设置为100px 几乎兼容所有的大显示器。
    // 考虑问题，屏幕缩小的时候，让HTML的fon-size是一个动态的值，并且与视图窗口大小有关，这样就实现了响应式。
     (function (window, document) {
    //   因为UI标准的设计稿标准的一倍图以375px为标准，为了找到规律，尽可能小的误差，所以就写 viewWidth = 750px
      var viewWidth = 750;
      var pick = viewWidth / 100;
      var mode = "resize";
      function change() {
        var view = document.documentElement.clientWidth || window.innerWidth;
    // 如果视图窗口宽度大于720px
        if (view >= 750) {
          document.getElementsByTagName("html")[0].style.fontSize = 100 + "px";
          return;
        }
    // 否则设置html的font-size为动态的值 = 视图窗口宽度 / 100px
        document.getElementsByTagName("html")[0].style.fontSize =
          view / pick + "px";
      }
      window.addEventListener(mode, change, !1);
      window.document.addEventListener("DOMContentLoaded", change, !1);
    })(window, document);
    </script>




============