rem与vw布局和响应式布局

1. rem与vw布局

rem:宽和高可以随着屏幕大小的变化而变化，当屏幕变化的时候修改HTML的字体大小。

<!-- rem 布局实现 -->
  <script>
    // 获取HTML元素
    const htmlEl = document.documentElement;
    // 设置HTML的字体大小
    const setHTMLFontSize = () => {
      // 获取可视区宽度
      const viewWidth = htmlEl.clientWidth;
      // 修改HTML的字体大小
// HTML的字体大小=（可视区宽度/设计稿宽度）*1rem对应的px;
      htmlEl.style.fontSize = viewWidth / 75 + 'px';
    };
    setHTMLFontSize();
    // 窗口大小改变，HTML字体大小也改变
    window.addEventListener('resize', setHTMLFontSize, false);
  </script>

优先使用vw 布局方案，如果条件不允许，在选择rem方案；修改历史项目时，如果该项目使用的是rem布局，可以使用vw+rem方案修改；

2. 响应式布局

⑴ 媒体查询（Media querys）

①定义：针对各种大小的屏幕写样式，让页面在不同大小的屏幕上都能正常显示。

②对不同的屏幕尺寸（大小）做出响应，并进行相应布局的一种移动web开发方式；可以使用媒体查询设置断点，响应不同尺寸的屏幕；一个网站兼容多种终端；在不同的断点下设置不同的样式。

③语法：@media screen and (min-width: 320px){满足以上两个条件就执行}

@media是关键字；媒体类型是：screen屏幕；min-width最小宽度； 320px是断点。代码意思是是屏幕设备并且屏幕宽度>=320px（断点 Breakpoint）。

④媒体类型

所有设备：all(默认值)；屏幕设备：screen ；打印设备：print ；屏幕阅读器，一般供残障人士使用：speech 。

⑤逻辑

与（and）；或（,）；非（not）

当and和not一起使用，则整体取反；当not和，一起使用时，not在谁前面就对谁取反。

⑥媒体特性

（width）、（max-width）、（min-width）、（-webkit-device-pixel-ratio）、

（-webkit-max-device-pixel-ratio）、（-webkit-min-pixel-ratio）、

Orientation:landscape(屏幕水平)/portrait（屏幕垂直）

⑵ 设置断点策略：PC端（从大到小），移动端（从小到大）

rem与vw布局和响应式布局

猜你喜欢