响应式网站设计常见的几种方案。

• 根据 JS 判断设备的类型，进而控制进入移动端页面还是PC端页面。

• 通过媒体查询，在不同的宽度下，进行不同的设计

• rem 方案+JS 控制根字体大小

• Flex 布局

---

网页设计的布局的种类

1. 响应式布局：根据页面宽度自动更改布局和样式

2. 流式布局：像素改为百分比（相对单位）作为单位，可以根据页面宽度做变化

3. 弹性布局：用em和rem作为单位（根据字体百分比强制放大缩小页面）

4. 自适应布局：预设了一些布局样式，根据用户机型判断展示样式

在现在技术发展比较快的情况下，以上几种布局的界限不是很清晰，通常以上结合以上几种方案实现一个完美的响应式网站。

设计方法

媒体查询

媒体查询的宽度规则有两种：

• min-device-wdith - 设备宽度

• min-width - 窗口宽度

在不同的情况下，按需选择使用哪一种。

@media screen and （min-width:400px）and (max-width:780px){
....
}

/*

通常我们会采用以下的方式，管理CSS
common.css
pc.css
mobile.css

*/

媒体查询的引入方式也有两种：

• link方式的引入

• css 里面引入

rem 方案

根据设备宽度自动改变字体大小函数

JS部分

let changeFontSize = () => {
  // 获取设备的宽度
  let w = document.documentElement.clientWidth
  // 在各种字体尺寸里面最大值是不超过40的
  let n = 20 * (w / 320) > 40 ? 40 + 'px' : 20 * (w / 320) + 'px'
  document.documentElement.style.fontSize = n
}
// 初始化的事件
window.addEventListener('load', changeFontSize)
// 当屏幕尺寸改变后的事件
window.addEventListener('resize', changeFontSize)

CSS部分

html {
  font-size: 10px;
}
div {
  font-size: 3rem;
}

自适应方案

根据设备自动跳转到不同的网页函数

function redirect() {
  // 获取设备的信息
  let userAgent = navigator.userAgent.toLocaleLowerCase()
  // 正则表达式，判断设备类型
  let device =
    /ipad|iphone|midp|rv:1,2,3,4|ucweb|android|windows ce|windows mobile/
  if (device.test(userAgent)) {
    // 跳转移动端页面
    window.location.href = './mobile.html'
  } else {
    // 跳转pc端页面
    window.location.href = './pc.html'
  }
}
redirect()