乐趣区

关于前端:rem-和-媒体查询

jiezi

一、rem 是什么

rem（root em）是一个绝对单位，相似于 em。

em 是父元素的字体大小，而 rem 的基准是绝对于 html 元素的字体大小。

html {font-size: 20px;}

father {font-size: 16px;}

/* child 是 father 的子元素，则 1em = 16px，此时 width 为 160px */
child {width: 10em;}

/* rem 是绝对于 html 元素的字体大小，则 1rem = 20px，此时 width 为 200px */
footer {width: 10rem;}

二、什么是媒体查问

媒体查问（Media Query）是 CSS3 中的新语法，能够针对不同的媒体类型来定义不同的款式，比方 能够依据不同屏幕尺寸设置不同款式 。

在重置浏览器大小的过程中，页面也会依据浏览器的宽度和高度从新渲染。

/* 语法 */
@media mediatype and|not|noly (media feature) {具体 css 款式}

1、mediatype 媒体类型

值 阐明
all 用于所有设施
print 实用于在打印预览模式下在屏幕上查看的分页资料和文档。
screen 次要用于屏幕，咱们最罕用的
speech 次要用于语音合成器

2、关键字

  • and：能够将多个媒体个性连贯到一起，相当于“且”；
  • not：排除某个媒体类型，相当于“非”，能够省略；
  • only：指定某个特定的媒体查问，能够省略。

3、media feature 媒体个性

罕用的有三个：width、min-width、max-width。

（1）当屏幕可视区域宽度小于 500px 时，body 背景色设置为红色。

/* 在屏幕上 且 宽度最大为 500px 时，设置 body 背景为红色 */
@media screen and (max-width: 500px) {
  body {background-color: red;}
}

（2）当屏幕可视区域宽度大于 500px，小于 1000px 时，body 背景色设置为绿色。

/* 在屏幕上 且 宽度最小为 501px，且 宽度最大为 999px 时，设置 body 背景为绿色 */
@media screen and (min-width: 501px) and (max-width: 999px) {
  body {background-color: green;}
}

（3）当屏幕可视区域宽度大于 1000px 时，body 背景色设置为紫色。

/* 在屏幕上 且 宽度最小为 1000px 时，设置 body 背景为紫色 */
@media screen and (min-width: 1000px) {
  body {background-color: purple;}
}

4、用媒体查问引入不同资源文件 

<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">

三、媒体查问 + rem 实现元素动静大小变动

rem 单位时依据 html 中文字大小变动的，用媒体查问不同设施的宽度，设置不同设施 html 的 font-size，就能够实现页面元素大小的动态变化。

那 html 中的 font-size 设置为多大适合呢？

假如咱们的设计稿是 750px 的，咱们把屏幕划分为 15 等份（也能够是 10 或者 20），每一份的大小（即 50px）作为 html 的字体大小。

那么在 320px 的设施中，每一份的大小为 320 / 15 = 21.33px。

640px 的设施中，每一份的大小为 640 / 15 = 42.67px。

/* 屏幕宽度 320px ～ 640px */
@media screen and (min-width: 320px) {
  html {font-size: 21.33px;}
}

/* 屏幕宽度 640px ～ 750px */
@media screen and (min-width: 640px) {
  html {font-size: 42.67px;}
}

/* 屏幕宽度 750px 以上 */
@media screen and (min-width: 750px) {
  html {font-size: 50px;}
}

如果此时设计稿中有个 div 的高度为 80px，则在 css 中，高度应该为 80 / 50 = 1.6rem。

也就是用设计稿中 元素的像素值 /（设计稿尺寸 / 划分的份数）。

这样这个 div 在不同屏幕尺寸下的大小别离为：

  • 屏幕宽度 320px ～ 640px：21.33 * 1.6 = 34.128px
  • 屏幕宽度 640px ～ 750px：42.67 * 1.6 = 68.272px
  • 屏幕宽度 750px 以上：50 * 1.6 = 80px
退出移动版