移动端响应式布局

最新推荐文章于 2025-03-22 00:53:38 发布

哒玲

最新推荐文章于 2025-03-22 00:53:38 发布

阅读量552

点赞数 1

分类专栏： JavaScript 文章标签：响应式

原文链接：http://baijiahao.baidu.com/s?id=1596834080269193528&wfr=spider&for=pc

版权

JavaScript 专栏收录该内容

30 篇文章

订阅专栏

目前主流设计稿为iphone6或iphone8尺寸：750*1334。目前主流的适配移动端页面方法：用rem做单位，通过css3媒体查询来改变html中的font-size值，或是根据dpr 的值修改viewport中的scale值。rem 是相对于 html 元素的 font-size 的一个单位。

1. 步骤

加重置样式reset.css/normalize.css确保字体设置及基础样式在各终端有相同的值。
通过rem的方式适配移动设备。

2. 思路

⑴ viewport+rem+ @media

viewport 是用户网页的可视区域，viewport这个meta标签（常用于定义页面的说明、关键字、最后修改日期和其他元数据，这些元数据将服务于浏览器来如何布局以及重载页面，搜索引擎以及其他网络服务），meta标签在这里固定如下:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

然后通过@media 查询根据设备屏幕尺寸改变html中的font-size值来达到适配移动设备屏幕。需要适应页面大小的任何元素都使用 rem 为单位来定义。同时规定iphone6上使用 1rem = 20px 来换算。小于 375px 的设备上不做缩小处理，对大于375px 宽度的设备进行等比缩放。

html {
      font-size: 20px;
    }
    @media only screen and(min-width: 400px) {
      html {
        font-size: 21.33333333px !important;
      }
    }
    @media only screen and(min-width: 414px) {
      html {
        font-size: 22.08px !important;
      }
    }
    @media only screen and(min-width: 480px) {
      html {
        font-size: 25.6px !important;
      }
    }

⑵ viewport+rem+js+dpr

viewport这个meta标签根据dpr值变化：

<meta name="viewport" content="initial-scale=X, maximum-scale=X, minimum-scale=X, user-scalable=no">

至于X是什么,这个由dpr决定。

通过上面的viewport的scale缩放比来达到适配移动设备屏幕。这种思路多需要JS的配合，根据dpr的值不断修改viewport中的scale值。

注：window.devicePixelRatio表示当前显示设备的物理像素分辨率与设备独立像素的比，大于1。

并且通过这个方法还可以解决一像素边框的问题：

<html>
<head>
  <title>1px question</title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <style>
    html {
      font-size: 1px;
    }
    * {
      padding: 0;
      margin: 0;
    }
    .bds_b {
      border-bottom: 1px solid #ccc;
    }
    .a, .b {
      margin-top: 1rem;
      padding: 1rem;
      font-size: 1.4rem;
    }
    .a {
      width: 30rem;
    }
    .b {
      background: #f5f5f5;
      width: 20rem;
    }
  </style>
  <script>
    var viewport = document.querySelector("meta[name=viewport]");
    var scale = window.devicePixelRatio;
    viewport.setAttribute('content', 'width=device-width, initial-scale=(1/scale), maximum-scale=(1/scale), minimum-scale=(1/scale), user-scalable=no');
    var docEl = document.documentElement;
    var fontsize = 10 * (docEl.clientWidth / 320) + 'px';
    docEl.style.fontsize = fontsize;
  </script>
</head>
<body>
<div class="bds_b a">下面的底边宽度是虚拟1像素的</div>
<div class="b">上面的边框宽度是虚拟1像素的</div>
</body>
</html>

转自：
http://baijiahao.baidu.com/s?id=1596834080269193528&wfr=spider&for=pc