媒体查询+rem实现元素动态大小变化

1.rem 基础

rem 单位

rem(root em)是一个相对单位。类似于em, em是父元素字体大小。

不同的是rem的基准是相对于html元素的字体大小。

比如,根元素(html)设置font-size=12px;非根元素设置width:2rem;则换成px表示就是24px。

rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以实现整体控制。

2. 媒体查询

2.1 什么是媒体查询

媒体查询(Media Query) 是CSS3新语法。

  • 使用@media查询,可以针对不同的媒体类型定义不同的样式
  • @media可以针对不同的屏幕尺寸设置不同的样式
  • 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
  • 目前针对很多苹果手机、Android手机,平板等设备都用得到多媒体查询

2.2 语法规范

@media mediatype and|not|only (media feature) {
    CSS-Code;
}
  • 用@media开头 注意@符号
  • mediatype 媒体类型
  • 关键字 and not only
  • media feature 媒体特性 必须有小括号包含

1. mediatype 查询类型

将不同得终端设备划分成不同的类型,称为媒体类型

  • all: 用于所有设备

  • print:用于打印机和打印机预览

  • screen:用于电脑屏幕,平板电脑,智能手机等

2. 关键字

关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件。

  • and:可以将多个媒体特性连接到一起,相当于“且”的意思。
  • not:排除某个媒体类型,相当于“非”的意思,可以省略。
  • only:指定某个特定的媒体类型,可以省略。

3. 媒体特性

每种媒体类型都具有各自不同的特性,根据不同的媒体类型的媒体特性设置不同的展示风格,暂且介绍一下三个。注意它们要加小括号

  • width:定义输出设备中页面可见区域的宽度
  • min-width: 定义输出设备中页面最小可见区域宽度
  • max-width:定义输出设备中页面最大可见区域宽度
/*这句话的意思是:在屏幕上 并且 最大宽度是800px 设置样式*/
@media screen and (max-width: 800px) {
    body {
        background-color: pink;
    }
}

2.3 媒体查询+rem实现元素动态大小变化

rem单位是跟着html来走的,有了rem页面元素可以设置不同大小尺寸

媒体查询可以根据不同设备宽度来修改样式

媒体查询+rem 就可以实现不同设备宽度,实现页面元素大小的动态变化

<style>
    @media screen and (min-width:320px) {
      html {
        font-size: 50px;
      }
    }
    @media screen and (min-width:640px) {
      html {
        font-size: 100px;
      }
    }
    .top {
      height: 1rem;
      font-size: .5rem;
      background-color: pink;
      color: #fff;
      text-align: center;
      line-height: 1rem;
    }
  style>
head>
<body>
  <div class="top">购物车div>
body>

2.4 引入资源

当样式比较多的时候,可以针对不同的媒体使用不同的stylesheets(样式表)。

原理,就是直接在link中判断设备的尺寸,然后引用不同的css文件。

语法规范:

你可能感兴趣的:(媒体查询+rem实现元素动态大小变化)