响应式布局— 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编辑  收藏  举报