css3常用的媒体适配

媒体查询（@media）

设备终端的多样化，直接导致了网页的运行环境变的越来越复杂，为了能够保证我们的网页可以适应多个终端，不得不专门为某些特定的设备设计不同的展示风格，通过媒体查询可以检测当前网页运行在什么终端，可以有机会实现网页适应不同终端的展示风格。

媒体类型

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

媒体特征

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。

关键字

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。
1、and可以将多个媒体特性连接到一起，相当于“且”的意思。
2、not 排除某个媒体类型，相当于“非”的意思，可以省略。
3、only指定某个特定的媒体类型，可以省略。

引入方式

1、link方法
<link href="./5-1.css" media="only screen and (max-width: 320px)">
2、@media方法（写在CSS里）

常用特征：
1、width / height完全等于layout viewport
2、max-width / max-height 小于等于layout viewport
3、min-width / min-height 大于等于layout viewport
4、device-width / device-height 完全等于ideal viewport
5、orientation: portrait | landscape肖像/全景模式

eq:

@media (max-width:1300px) {}

@media (max-width:1080px) {}

@media (max-width:799px) {}

@media (max-width:720px) {}

@media (max-width:460px) {}

@media (max-height:750px) {}

@media (max-height:310px) {}

@media (max-height:260px) {}

@media (min-width:1921px),(min-height:1201px) {}

@media (max-width:1280px) and (max-height:800px) {}

@media (max-width:960px) and (max-height:600px) {}

@media (max-width:800px),(max-height:480px) {}

/*orientation:landscape 宽度大于高度*/
@media
(orientation:landscape) and (max-height:480px),(orientation:portrait) and (max-width:699px) {}

@media (orientation:landscape) and (max-height:300px) {}

@media (orientation:landscape) and (max-height:650px) {}

@media (orientation:landscape) and (max-height:650px) and (max-width:660px) {}

@media (orientation:landscape) and (max-height:650px) and (max-width:540px) {}

@media
(orientation:landscape) and (max-height:650px) and (max-width:460px),(orientation:landscape) and (max-height:300px),(orientation:portrait) and (max-height:380px) {}

手机端

/* 小于400 */
@media screen and (max-width:300px) {
html,body {
font-size:0.58rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:301px) and (max-width:350px) {
html,body {
font-size:0.6rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:351px) and (max-width:420px) {
html,body {
font-size:0.7rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:421px) and (max-width:490px) {
html,body {
font-size:0.9rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:491px) and (max-width:620px) {
html,body {
font-size:1rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:621px) and (max-width:720px) {
html,body {
font-size:1.2rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:721px) and (max-width:820px) {
html,body {
font-size:1.4rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:821px) and (max-width:920px) {
html,body {
font-size:1.6rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:921px) and (max-width:1020px) {
html,body {
font-size:1.8rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:1021px) and (max-width:1120px) {
html,body {
font-size:2rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:1121px) and (max-width:1220px) {
html,body {
font-size:2.2rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:1221px) and (max-width:1320px) {
html,body {
font-size:2.4rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:1321px) and (max-width:1420px) {
html,body {
font-size:2.6rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:1421px) and (max-width:1520px) {
html,body {
font-size:2.8rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:1521px) and (max-width:1620px) {
html,body {
font-size:3rem;
}
}

参考：https://blog.csdn.net/Amanda_wmy/article/details/79495307

https://www.cnblogs.com/yszr/p/8041719.html