JavaScript 结合 rem 实现移动端响应式布局

响应式布局方案概述

电脑端商城项目完成后，紧接着进行手机端开发。手机端网站开发的核心在于适配不同宽度的手机屏幕，确保在所有设备上均能正常显示。以往此类项目常直接引入 Bootstrap 框架，但经过前一个项目的实践发现，Bootstrap 虽然功能强大，但实际使用的样式极少，主要仅用于基础排版。即便经过压缩处理，其文件体积仍占据较大比例。因此，本次尝试完全使用原生代码进行响应式开发。目前所了解的响应式方案主要有以下几种。

百分比法及其局限性

1. 百分比法：

该方法指页面元素的 margin、padding、width、height 等属性均使用百分比（%）进行计算。CSS 中百分比的基准是父元素，所有百分比计算均以此为准。例如，子元素宽度设为 50%，其父元素宽度即为基准；若子元素 padding-left 为 50%，基准仍为父元素宽度；若子元素 margin-top 为 20%，基准则为父元素高度。由于 body 默认宽度等于屏幕宽度（PC 端为浏览器窗口宽度），只需让子孙元素按百分比定位或指定尺寸即可。然而，这种方法仅适用于布局简单的页面，对于复杂页面的实现难度较大。

媒体查询的使用与局限

2. 媒体查询：

这是 CSS3 提供的特性，旨在解决适应手机屏幕的问题。媒体查询的功能是为不同媒体类型设置不同的 CSS 样式，这里的“媒体”涵盖页面尺寸、设备屏幕尺寸等。最常用的形式如下：

phone:@media screen and (max-width：767px) {/手机中样式/}

pad：@media screen and (max-width：991px)and(min-width:768) {/平板中样式/}

pc:@media screen and (min-width：992px){/电脑中样式/}

...（你还可以设置更多节点）

若使用媒体查询，为了确保每个像素宽度下都有对应的适配效果，显然需要设置更密集的宽度断点范围。

基于 rem 与 JavaScript 的自适应方案

3. 此外还有 CSS3 的单位 rem：

rem 将根节点 html 的 font-size 值作为整个页面的基准尺寸。例如，若设置 <html style="font-size:10px">，则 1rem 等于 10px。如何实现适配呢？这需要借助 JavaScript 在页面加载时获取 window 的宽度（即浏览器窗口的宽度）$(window).width();。在开发手机页面时，通常将最大宽度设置为 640px，因为 640px 能保证在至今最宽的手机上显示时，网页两端刚好贴合屏幕。接下来通过一个小例子进行说明。

屏幕放大缩小时，这三个 div 同样保持在一行并等比放大缩小。

html

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

css

<style>
  html{font-size: 20px;}
  .container{
    max-width: 640px;
    border:1px solid red;
    margin:0 auto;
    overflow: hidden;
    box-sizing: border-box;
  }
  .box{
    float: left;
    width:10.6rem;
    //我这里设置html的font-size:20px;最大
宽为640px,即相当于640/20=32rem;一行有3个div，所以每个div宽10.6rem

你也可以像论坛里面讲的那样设置html的font-size：62.5%;因为浏览器默认像素16px;乘以62.5%之后为整数10px;方便计算

    height:10.6rem;
    border:1px solid #000;
    box-sizing: border-box;
  }
</style>

js

<script>
 window.onresize = window.onload = function () {
   var w = $(window).width();
   if(w<640){
     var size = 20*w/640;//640的时候
对应html的font-size为20，那么宽度为w是对应
的font-size可这么求
     $('html').css('fontSize',size+'px');
   }
 }
</script>

注意这里有一个小坑：当把这个小 demo 拿到谷歌浏览器里面验证的时候，你会发现开始这 3 个 div 会随着你浏览器窗口缩小而缩小，到达某个值后就不动了，原因是谷歌浏览器默认支持 html 的 font-size 最小值为 10px; 在小于这个值就不会再小了，这是我当时碰到的问题花了快两个小时上网找，一遍遍演示也都没想明白，最后终于查到这么个非人为原因.

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。