这周学到的页面自适应的几种方法

Posted 2020-08-20 叶文翔

上星期都是在学响应式的页面，主要是两种方法来做响应式的页面：

第一种：页面中的宽度都用百分比来做。

• 页面中盒子的高度不能设固定高度。开始学DIV+CSS布局的时候我给每个盒子都设置了固定的宽和高，这样页面做起来非常快，只需要先把页面整体的布局结构搞定，再往里面丢内容就行了，但是后来发现这样的结构是错误的，调整浏览器的宽度里面的内容可能会冲破盒子。正确的思路是高度由内容去撑起来，不管你如何去缩小，内容都不会跑出盒子。
• 百分比是按照父元素的宽度来计算的，包括margin 和padding的值，也是除以父元素的宽度，水平方向的单位都需要设置成百分比。
• 然后字体的大小最好使用rem单位来设置，需要给根元素设置一个字体大小，比如html.body{font-size:10px}，则1rem的大小为10px，方便在不同的屏幕尺寸来调整页面整体文本的大小。
• 使用媒体查询来根据不同的屏幕尺寸来应用不同的样式

  @media only screen and (max-width: 500px) {
      body {
          background-color: lightblue;
      }
  }

  需要注意的是图片的宽度要设置成百分比，高度不需要设置，这样缩小屏幕时，图片自动的等比例缩小和放大。

第二种：页面所有的尺寸用rem单位来设置。

需要给页面添加以下代码：

1 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
2 <meta name="format-dection" content="telephone=no"/>
3 <script type="text/javascript">
4     !function(a){function b(){var b=a.document,c=b.documentElement,d=c.getBoundingClientRect().width;document.documentElement.style.fontSize=20*(d/360)+"px"}window.addEventListener("DOMContentLoaded",function(){b()},!1),window.addEventListener("resize",function(){b()}),b()}(window);
5     </script>

第一行代码的作用是禁止让用户缩放页面。

然后给根元素设置字体大小为20px。html,body{font-size:20px},后面页面中所有的尺寸按照PSD上面量出来后除以40转换成rem单位的数值，注意是任何尺寸都要需要去除以40，这比第一种设置百分比按照父元素的宽度去计算方便很多。

• 图片需要设置宽和高，PSD量出来后除以40，少一个都不行，只设置一个图片会被拉变形。
• 做手机端页面时，清除margin和padding 用*可能清除不掉，需要加上标签名字去清除。
• 其他的按照正常的去做。