移动web-03

因帅被叛流放
126 阅读6分钟

课前

  1. 反馈
  2. 复习
  3. 作业点评

今日学习内容

  1. rem、em单位

  2. 媒体查询

  3. rem与媒体查询的结合（重点：如何划分档位、如何设置font-size值）

  4. 项目实战

    • 优惠券

em与rem的区别

  • em：自己的font-size值

    <div class="father">
  <div class="child"></div>
</div>

    .father {
  font-size: 20px;
}
.child {
  width: 2em;
  height: 2em;
  background-color: pink;
}

  • rem：html元素的font-size值

    html {
  font-size: 100px;
}
.child {
  font-size: 30px;
  width: 2rem;
  height: 2rem;
  background-color: pink;
}

之前做的页面还有什么问题？

  • 文字的大小也要自适应
  • 流式布局和flex布局解决的是宽度自适应，而高度很难解决。

如何实现？靠媒体查询

@media mediatype and|not|only (media feature){
    css代码...
}

各单词解释

  • 用@media开头，注意@符号
  • mediatype媒体类型
    • all 用于所有设备
    • print 用于打印机
    • screen 用于电脑屏幕，平板电脑，智能手机屏幕
  • 关键字and not only
    • and表示且的意思，满足多个条件
    • not表示排除掉某个，比如not print表示不包括打印机
    • only表示仅某一个设备
  • media feature 媒体特性 必须有小括号包含
    • 设备宽度width/max-width/min-width
    • 设备高度height
    • 设备方向: portrait (竖屏模式) | landscape (横屏模式)

示例：

.box {
  width: 100%;
  background-color: pink;
}
@media screen and (width: 400px) {
  .box {
    height: 40px;
  }
}
@media screen and (width: 500px) {
  .box {
    height: 50px;
  }
}

元素宽高的自适应为什么必须要等比例？

示例：

.box {
  width: 100%;
  background-color: pink;
}
@media screen and (width: 400px) {
  .box {
    height: 40px;
  }
}
@media screen and (width: 500px) {
  .box {
    height: 100px;
  }
}

原因：如果不等比例样式就会乱掉

只使用媒体查询有什么不好？

示例：

<header></header>
<footer></footer>

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: pink;
}
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: pink;
}
@media screen and (width: 400px) {
  header {
    height: 20px;
  }
  footer {
    height: 40px;
  }
}
@media screen and (width: 500px) {
  header {
    height: 25px;
  }
  footer {
    height: 22.5px；
  }
}

坏处：代码重复性太高

rem与媒体查询结合使用

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.5rem;
  background-color: pink;
}
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1rem;
  background-color: pink;
}
@media screen and (width: 400px) {
  html {
    font-size: 40px;
  }
}
@media screen and (width: 500px) {
  html {
    font-size: 50px;
  }
}

当浏览器窗口不等于媒体查询中的width怎么办？

在工作中我们一般不使用width，一般使用max-width和min-width。有三种方式：

  • 同时使用min-width和max-width

    @media screen and (min-width: 0px) and (max-width: 399px) {
  html {
    font-size: 30px;
  }
}
@media screen and (min-width: 400px) and (max-width: 499px) {
  html {
    font-size: 40px;
  }
}
@media screen and (min-width: 500px) {
  html {
    font-size: 50px;
  }
}

  • 只使用min-width（稍微推荐）

    @media screen and (min-width: 0px) {
  html {
    font-size: 30px;
  }
}
@media screen and (min-width: 400px) {
  html {
    font-size: 40px;
  }
}
@media screen and (min-width: 500px) {
  html {
    font-size: 50px;
  }
}

几个问题：

  1. 如果窗口不等于min-width或max-width时怎么办？就按照上一个font-size进行计算。所以当窗口在一个阶段内进行变化时，页面上的所有使用rem的元素不会发生任何变化

真正工作中会怎么做？

第一步：档位划分

@media screen and (min-width: 0px) {
  html {
    font-size: 85.3333px;
  }
}
@media screen and (min-width: 375px) {
  html {
    font-size: 100px;
  }
}
@media screen and (min-width: 480px) {
  html {
    font-size: 128px;
  }
}
@media screen and (min-width: 540px) {
  html {
    font-size: 144px;
  }
}
@media screen and (min-width: 640px) {
  html {
    font-size: 170.6666px;
  }
}

几个问题：

  1. min-width和max-width的值如何确定，即档位应该如何划分？

    可以随便写，这里只是列出了业内最常用的屏幕尺寸。档位划分得越细，页面的自适应效果就越细腻。

  2. font-size值如何确定？

    分两步：

    1. 先确定375px屏幕尺寸的font-size值。

      为什么？因为UI图是以iphone6/7/8为标准设计的，尺寸为750px，对应的逻辑分辨率为375px。

      那这里为什么要设置为100px？其实可以随便设置，这里设置100px是为了接下来方便计算，比如测得一个图片宽度为24px，我们就可以很快地计算出rem值为0.12rem。

    2. 再计算出别的屏幕尺寸的font-size值

      拿414px屏幕尺寸举例：用375除以100得到3.75，然后再用414除以3.75。（或者：414/它的font-size = 375/100。其实就是要等比例）

第二步：把UI图测量的尺寸换算成rem单位

  1. 根据UI图得出css像素值

    eg：测得UI图div元素的宽为375px，因为是2倍图，所以css像素值为187.5px

  2. 把px换算成rem

    eg：css像素值 / 用iphone6/7/8打开时根元素font-size的值 = 187.5px / 100px = 1.875rem

    问题：这里为什么要除以用iphone6/7/8打开时根元素font-size的值呢？因为UI图就是以iphone6/7/8为标准出的

    比如用187.5px / 150px = 1.25rem，然后用iphone6/7/8打开，结果显示的是1.25rem * 100px * 2 = 250px，和UI图尺寸不符

    比如用187.5px / 100px = 1.875rem，然后用iphone6/7/8打开，结果显示的是1.875rem * 100px * 2 = 375px，和UI图尺寸相符

    比如用187.5px / 100px = 1.875rem，然后用iphoneXR打开，结果显示的是1.875rem * 110.4px * 2 = 414px，和UI图尺寸不符，但是是等比例缩放的，这正是UI所想要的效果

第三步：重置body元素的fontSize值

/* 由于字体会继承，所以需要重置一下body的font-size */
body {
    font-size:12px;
}

最后浏览器是怎么运行的呢？

  • 如何用iphone6/7/8打开

    则会执行下面这段代码：

    @media screen and (min-width: 375px) {
  html {
    font-size: 100px;
  }
}

    这时html的font-size值变为了100px，再去执行下面这段代码：

    .box {
  width: 1.875rem;
}

    这时浏览器就会这样计算：1.875 x 100 x 2（2倍屏）= 375px，占屏幕宽度的一半

  • 如何用iphoneXR（物理分辨率为828x1792）打开

    则会执行下面这段代码：

    @media screen and (min-width: 414px) {
  html {
    font-size: 110.4px;
  }
}

    这时html的font-size值变为了110.4px;，再去执行下面这段代码：

    .box {
  width: 1.875rem;
}

    这时浏览器就会这样计算：1.875 x 110.4 x 2（2倍屏）=414px，占屏幕宽度的一半

检查大家是否真的理解了rem与媒体查询结合使用

题目：UI图尺寸为1024px（3倍图），如何进行档位划分？

@media screen and (min-width: 0px) {
  html {
    font-size: 93.75px;
  }
}
@media screen and (min-width: 320px) {
  html {
    font-size: 93.75px;
  }
}
@media screen and (min-width: 341.333px) {
  html {
    font-size: 100px;
  }
}
@media screen and (min-width: 500px) {
  html {
    font-size: 146.48px;
  }
}
avatar
文章
阅读
粉丝