响应式布局— rem介绍、媒体查询介绍、rem和媒体查询结合的布局、flexible.js 的使用

媒体查询

媒体查询 Media Queries，是一种可以根据不同的设备为其实现不同的样式的技术。在CSS3 引入了媒体查询，使用媒体查询，你可以针对不同的媒体类型定义不同的样式，还可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，媒体查询是非常有用的。
  • 可能有一组用于屏幕的样式规则、一组用于打印机的样式规则、一组用于手持设备的样式规则，甚至还有一组用于电视，等等。通过媒体查询你可以针对这些不同的设备设置不同的样式。
  • 可能在同一类型的设备上，当浏览器的窗口大小不同时，你可以在不同的尺寸下设置不同的样式，实现响应式布局。

媒体查询可以用于检测很多东西：

  • 自动检测 viewpoint（视口）的宽度和高度
  • 自动检测设备的宽度和高度
  • 旋转方向（智能手机横屏或竖屏）
  • 分辨率大小

使用媒体查询是一种流行的技术，可以向台式机、笔记本电脑、平板电脑和手机等（例如 iPhone 和 Android 手机）提供定制的样式表，并且它支持过渡效果。

语法

@media mediatype and|not|only (media feature){
   css-code;
}

 参数：

  • 必须是以 @media 开头
  • 然后指定设备类型（媒体类型mediatype）：all（用于所有设备）；print（用于打印机和打印预览）；scree（用于电脑屏幕,平板电脑,智能手机等）
  • 接着是括号()里的规定媒体特性（media feature），媒体特性的书写格式与css样式类似，都是属性名：属性值：width（定义输出设备中页面可见区域的宽度）；min-width（定义输出设备中页面最小可见区域宽度）；max-width（定义输出设备中页面最大可见区域宽度）
  • 最后跟着的大括号{ css-code }，里面放置的是要设置的css样式。

引入方式：

在<style>...</style>标签里面使用@media来实现媒体查询

参考下面的标题 案例：

在<style>...</style>标签上使用media=""

案例：只有当设备宽度大于等于 300px 小于等于 500px 时运用此样式

<style media="(min-device-width: 300px) and (max-device-width: 500px)">
   ...
</style>

在<link>...</link>标签上使用media=""

案例：当设备宽度大于等于 300px 小于等于 500px 时运用文件 style1.css 中的样式；当设备宽度大于 500px 时运用文件 style2.css 中的样式

<link rel="stylesheet" href="./style1.css" media="(min-device-width: 300px) and (max-device-width: 500px)"/>
<link rel="stylesheet" href="./style2.css" media="(min-device-width: 501px)"/>

案例：

让元素div，在屏幕宽度小于540px时，宽高为300px，背景色为红色；在屏幕宽度大于等于540px小于970px时，宽高为500px，背景色为绿色；在屏幕宽度大于970px时，宽高为900px，背景色为蓝色；

      div {
        border: 1px solid #000;
        transition: 0.5s;
      }
      @media screen and (max-width: 539px) {
        div {
          width: 300px;
          height: 300px;
          background-color: red;
        }
      }
      @media screen and (min-width: 540px) and (max-width: 969px) {
        div {
          width: 500px;
          height: 500px;
          background-color: green;
        }
      }
      @media screen and (min-width: 970px) {
        div {
          width: 900px;
          height: 900px;
          background-color: blue;
        }
      }

rem布局

rem单位，是相对于根元素 <html></html> 的字体大小 进行设置，默认情况下根元素的字体大小为 16px，此时 1rem = 16px。

rem布局的本质是根据设备宽度进行缩放，一般是基于屏幕宽度，先按定宽高设计出来页面，然后转换为rem单位。可以配合 媒体查询 或 js 在不同屏幕下改变 根元素<html></html> 的字体大小，来达到整个页面的缩放。rem是弹性布局的一种实现方式，弹性布局可以算作响应式布局的一种，但响应式布局不是弹性布局，弹性布局强调等比缩放，100%还原；响应式布局强调不同屏幕要有不同的显示，比如媒体查询。

rem与媒体查询的结合使用

我们只需使用 @media 设置不同屏幕宽度下根元素的字体大小，然后在后面元素的像素大小设置中使用 rem 单位。

html{
  font-size: 50px;
}
// 将屏幕宽度划分成15个区间
@media screen and (min-width: 320px){
  html{
    font-size: 320px;
  }
}
@media screen and (min-width: 360px){
  html{
    font-size: 360px;
  }
}
@media screen and (min-width: 384px){
  html{
    font-size: 384px;
  }
}
@media screen and (min-width: 400px){
  html{
    font-size: 400px;
  }
}
@media screen and (min-width: 414px){
  html{
    font-size: 414px;
  }
}
@media screen and (min-width: 424px){
  html{
    font-size: 424px;
  }
}
@media screen and (min-width: 480px){
  html{
    font-size: 480px;
  }
}
@media screen and (min-width: 540px){
  html{
    font-size: 540px;
  }
}
@media screen and (min-width: 720px){
  html{
    font-size: 720px;
  }
}
@media screen and (min-width: 750px){
  html{
    font-size: 750px;
  }
}

flexible.js的使用

flexible.js 是手机淘宝团队出的简洁高效移动端适配库，我们再也不需要写不同屏幕的媒体查询，因为里面js做了处理。它的原理是把设备屏幕宽度划分成10等份，在不同屏幕宽度下，比例是一致的。我们要做的就是确定好我们当前设备的 根元素<html></html> 字体大小就可以了。

比如当前设计图是750px 那么在写样式时只需要把 html 的字体大小设置为75px （750px/10），然后在后面元素的像素大小设置中使用 rem 单位，这个时候写的样式与设计图就是等比例的。 flexible.js 会实时的计算屏幕宽度并设置根元素的字体大小，从而实现等比缩放。

下面为 flexible.js 的源代码，只需复制并在文件中引入即可使用。
(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

vscode插件

 

 

 
posted @ 2022-09-23 20:55  Lamb~  阅读(566)  评论(0)  编辑  收藏  举报