前端如何通过Rem进行自适应布局

本文介绍了如何通过JavaScript实现在不同设备上保持设计稿比例,利用rem单位实现元素宽度随屏幕尺寸变化的技术。重点讲解了如何计算根元素字体大小,确保元素宽度与设计稿一致。

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .d1 {
      background-color: red;
      width: 1rem;
      height: 1rem;
    }
  </style>
</head>
<body>
  <div class="d1"></div>
  <div class="d2"></div>
  <script>
    // 假设设计稿上是640px宽度,.d1宽度是100px,我们希望能跟设计稿上保持相同的比例
    // 那么, 100/640 = 当前元素宽度/当前设备宽度
    // 推出  当前元素宽度 = 100*当前设备宽度/640
    // 但是,我们不可能实时的改变页面上所有元素的宽度,所以需要借助rem来实现,rem可以让元素根据根元素的字体大小进行变化,1rem = 根元素字体大小
    // 所以,上面的公式中的当前元素宽度,我们希望能够转换为: 根元素字体大小*当前元素宽度与根元素字体大小的比值,也即 x * rem的形式,同时,我们要知道 右边的100表示的元素在设计稿中的宽度, 它应该也可以表示成 x * rem的形式,区别在于rem大小不同
    // 所以,上面公式进一步转化为  x* rem1 = x * rem2 * 当前设备宽度/640,结果就变成我们需要确定设计稿中字体大小是多少,以此来推出我们实际页面中字体大小是多少
    // 为了方便计算,我们假定设计稿的根字体大小为100px(为什么说方便计算呢?因为如果假定为100px的话,那么比如我们看到设计稿中的一个元素宽度是64px的话,我们就能轻松的知道它的rem形式是0.64rem)
    window.onload = function(){
      document.documentElement.style.fontSize = (document.documentElement.clientWidth * 100)/640 + 'px';
      window.onresize = function(){
        document.documentElement.style.fontSize = (document.documentElement.clientWidth * 100)/640 + 'px';
        document.querySelector('.d2').innerHTML = getComputedStyle(document.querySelector('.d1')).width;
      }
    }
  </script>
</body>
</html>

 

### 前端响应式布局自适应布局的区别 #### 定义与目标 响应式设计(Responsive Design)和自适应设计(Adaptive Design)均致力于优化网页在各种屏幕尺寸下的展示效果,提升用户体验。然而,在具体实施策略上存在差异。 #### 实现方式对比 ##### 自适应布局(Adaptive Design) 自适应布局通过预先设定若干固定的断点,针对特定设备或屏幕大小创建多个版本的页面布局。当检测到用户的访问终端时,服务器会返回最适合该设备的最佳匹配版面结构[^1]。对于宽度自适应而言,可以采用如下几种技术手段: - **绝对定位法**:借助CSS中的`position:absolute;`属性定义元素位置,并配合百分比值调整其相对父容器的比例关系。 - **Margin自动填充**:让中心区块两侧留白区域由浏览器自行计算填补,从而保持主体部分居中且随窗口缩放而变化。 - **浮动机制**:运用float特性使某些组件能够依据剩余空间灵活排列,适用于构建多栏式的弹性框架体系。 ```css /* 绝对定位 */ .container { position: absolute; width: 80%; } /* Margin自动填充 */ .main-content { margin-left: auto; margin-right: auto; } ``` ##### 响应式布局(Responsive Design) 相比之下,响应式设计更强调单一HTML文件内嵌入媒体查询(Media Queries),允许样式表根据实际视口(Viewport)参数动态改变视觉呈现逻辑[^2]。这意味着无需为每种可能遇到的情况单独准备静态模板,而是依靠流体网格(fluid grid)、比例字体(scalable font sizes)以及智能图像处理等技巧达成无缝过渡的效果。 ```css @media only screen and (max-width: 768px){ /* 当屏幕宽度小于等于768像素时应用此规则 */ body{ background-color:#f9f9f9; } } ``` #### 单位选择建议 为了确保跨屏兼容性和灵活性,推荐优先考虑rem作为长度计量单位,它基于根节点(html标签)的基础字号进行换算,便于全局统一控制文字及其他UI部件的尺度感[^3]。 ```html <html style="font-size:16px;"> <body> <p>This text will be sized relative to the root element.</p> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值