# 2.响应式原理
# 2.响应式原理
- 响应式具有的特点
1.网页宽度自动调整
2.尽量少用绝对宽度
3.字体要使用rem、em作为单位
4.布局要使用浮动或者弹性布局
响应式下任何东西都要随着屏幕的尺寸改变而改变不能使用绝对大小
- 媒体查询
根据一个或多个基于设备类型、具体特点和环境来应用样式
@media
@规则
@chartset 定义编码
@import 引入css文件（css模块化）
@font-face 自定义字体
@keyframes animation里的关键帧
@media 媒体查询
```html
媒体查询使用方式一：
<style>
@media all{
div{
font-size:3rem;
}
}
</style>
媒体查询使用方式二：
<style>
@import url("css/bottstrap.css")(min-width:200px);
</style>
媒体查询使用方式三：
<link rel="stylesheet" href="css/bootstrap.css" media="all">
```
- 媒体查询介绍
1.媒体类型
all 所有设备
print 打印机设备
screen 彩色的电脑屏幕
speech 听觉设备（针对有视力障碍的人士，可以把页面的内容以语音的方式呈现的设备）
注意：tty、tv、projection、braille、embossed、aural等几种类型在媒体查询4中已经废弃
```html
<style>
div{
width:200px;
height:200px;
background:green;
}
@media print{
div{
font-size:80px;
}
}
@media screen{
div{
width:300px;
height:300px;
background:pink;
}
}
@media all{
div{
width:400px;
height:400px;
background:grey;
}
}
</style>
<div>媒体类型</div>
```
2.媒体特性
width 宽度
min-width 最小的宽度，宽度只能比这个大
max-width 最大的宽度，宽度只能比这个小
height 高度
min-height 最小的高度，高度只能比这个大
max-height 最大的高度，高度只能比这个小
orientation 屏幕方向
landscape 横屏（宽度大于高度）
portrait 竖屏（高度大于宽度）
aspect-ratio 宽高比
-webkit-device-pixel-ratio 像素比（webkit内核的私有属性）
```html
<style>
div{
width:200px;
height:200px;
background:red;
}
/*屏幕尺寸大于500的时候满足*/
@media (min-width:500px){
div{
background:green;
}
}
/*屏幕尺寸小于400的时候满足*/
@media (max-width:400px){
div{
background:blue;
}
}
/*横屏的时候满足*/
@media (orientation:landscape){
div{
width:400px;
height:100px;
}
}
/*竖屏的时候满足*/
@media (orientation:portrait){
div{
width:100px;
height:400px;
}
}
/*宽高比为4:3的时候满足*/
@media (aspect-ratio:4/3){
div{
border:10px solid #000;
}
}
/*像素比为2的时候满足*/
@media (-webkit-device-pixel-ratio:2){
div::after{
content:'hello world';
font-size:50px;
}
}
</style>
<div>媒体特性</div>
```
3.逻辑运算符 用来做条件判断
and 合并多个媒体类型（并且的意思）
, 匹配某个媒体查询的（或者的意思）
not 对媒体查询取反
only 仅在媒体查询匹配成功后应用样式（防范老旧浏览器）
```html
<style>
div{
width:200px;
height:200px;
background:red;
}
/*所有设备 && 屏幕尺寸大于500 && 横屏的时候 满足*/
@media all and (min-width:500px) and (orientation:landscape){
div{
background:green;
}
}
/*屏幕尺寸大于500 || 横屏的时候 满足*/
@media (min-width:500px),(orientation:landscape){
div{
background:pink;
}
}
/*（除了所有设备下屏幕小于800）=== （所有设备下屏幕大于800）的时候满足*/
@media not all and (max-width:800px){
div{
background:blue;
}
}
/*老旧浏览器不认识@media时候，不会解析里面的css样式*/
@media only screen and (min-width:1000px){
div{
background:grey;
}
}
</style>
<div>逻辑运算符</div>
```
以上是markdown格式的笔记
