响应式布局

01  什么是响应式布局

• 响应式布局的理念是：页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。即一个网页可以实现适应不同的终端，而不是根据每个终端做调整。

内容：

1. 设置viewport/scale
2. 使用流体宽度（也就是设置max/min-width，不使用固定宽度）
3. 媒体查询（Media Queries）（不同的css样式对应不同的屏幕大小）
4. Rem单位转换
5. 移动优先

---

02  媒体查询（Media Queries）

媒体查询允许我们根据设备的特性来应用不同的样式申明

• 语法

以@media开头来表示这是一条媒体查询语句，@media后面的是一个或者多个表达式，如果表达式为真，则应用样式。

@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
//在屏幕宽度小于 600px 的时候，会作用大括号里的内容

媒体查询可以在 link标签上加media属性或css文件中使用

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

---

• 媒体查询语句结构

由媒体类型 +一到多个CSS属性判断组成，而多个CSS属性判断可以用关键字and连接。媒体类型是可选的，默认是全部（all）

@media screen and (min-width:1024px) and (max-width:1280px) and (animation){
  body{font-size:medium;}
}

max与min

他们是要配合支持它们的属性使用的

@media (min-width:1000px) and (min-device-width:1500px){
  body{font-size:medium;}
}

---

• 逻辑操作符

操作符 not，and 和 only 可以用来构建复杂的媒体查询。
and 操作符用来把多个 媒体属性 组合起来，合并到同一条媒体查询中，只有当每个属性都为真时，这条查询的结果才为真。
not 操作符用来对一条媒体查询的结果进行取反。
only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式，可以通过它让选中的样式在老式浏览器中不被应用。
若使用了 not 或 only 操作符，必须明确指定一个媒体类型。

---

• media query支持的属性

属性	值	是否接受 min/max 前缀	描述
color	整数	yes	每种色彩的字节数
device-aspect-ratio	整数/整数	yes	宽高比例
device-height	整数+单位	yes	设备屏幕的输出高度
device-width	整数+单位	yes	设备屏幕的输出宽度
grid	整数	no	是否是基于格栅的设备
height	整数+单位	yes	渲染界面的高度
monochrome	整数	yes	单色帧缓冲器中每像素字节
resolution	分辨率(“dpi/dpcm”)	yes	分辨率
scan	Progressive interlaced	no	tv媒体类型的扫描方
width	整数+单位	yes	渲染界面的宽度
orientation	Portrait/landscape	no	横屏或竖屏

• webkit浏览器对media query支持的属性

常见的有

transform-2d 只用于支持使用 -webkit-transform实现2D变换的浏览器

transform-3d 只用于支持使用 -webkit-transform实现3D变换的浏览器

transition 只用于支持使用-webkit-transition实现变换效果的浏览器

animation 只用于支持使用-webkit-animation实现动画的浏览器

---

• 媒体类型(media type)列表

all 所有设备

braille 盲文

embossed 盲文打印

handheld 手持设备

print 文档打印或打印预览模式

projection 项目演示，比如幻灯

screen 彩色电脑屏幕

speech 演讲

tty 固定字母间距的网格的媒体，比如电传打字机

tv 电视

---

device-aspect-ratio

 

device-aspect-ratio可以用来适配特定屏幕长宽比的设备

/* for 4:3 screen */
@media only screen and (device-aspect-ratio:4/3){
    selector{
    }
}

/* for 16:9 and 16:10 screen */
@media only screen and (device-aspect-ratio:16/9) and (device-aspect-ratio:16/10){
    selector{
    }
}

---

03  Em和Rem单位

Em：https://m.html.cn/book/css/values/length/em.htm?from=%E6%96%87%E7%AB%A0%E9%A1%B5%E5%86%85%E9%93%BE%E6%8E%A5

Em，相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

Rem：https://m.html.cn/book/css/values/length/rem.htm?from=%E6%96%87%E7%AB%A0%E9%A1%B5%E5%86%85%E9%93%BE%E6%8E%A5

Rem，相对长度单位。相对于根元素(即html元素)font-size计算值的倍数。
 

---

Em

em是相对于父级元素的单位，会随父级元素的属性（font-size或其它属性）变化而变化

eg：

<div class='embox'>

    用em相对长度单位来设置文本的字体大小</span>

</div>

//样式

.embox {

  border:1px solid red;

  width:200px;

  height:100px;

  font-size:30px;

}

.em {

  font-size:0.5em;

}

/*30px x 0.5 = 15px*/

---

Rem

rem是相对于根目录（HTML元素）的，所有它会随HTML元素的属性（font-size）变化而变化

eg：

<div class='rembox'>

    用rem相对长度单位来设置文本的字体大小</span>

</div>

//样式

.rembox {

  border:1px solid red;

  width:300px;

  height:100px;

  font-size:30px;

}

.rem {

  font-size:0.5rem;

}

/*16px x 0.5 = 8px*/

---

Em 和Rem 单位之间的区别是浏览器根据谁来转化成px值,em是基于当前对象内文本的字体尺寸决定，rem是基于html元素的字体大小来决定，而根(html)元素的字体大小如果没有显式地设置固定值去覆盖，那么它首先来自浏览器设置，因此浏览器的字体大小设置可以影响每个使用rem单元以及每个通过em单位继承的值。为了还原设计稿和实现合理的布局所以需要根元素重写。

---

参考：https://www.w3cplus.com/css/rem-vs-em.html?from=%E6%96%87%E7%AB%A0%E9%A1%B5%E5%86%85%E9%93%BE%E6%8E%A5

---

 

 

 

 

 

 

 

 

 

 

 

 

 

本文地址：https://blog.csdn.net/m0_52386161/article/details/112544866