CSS - 媒体查询
语法规范
@media mediatype and|not|only (media feature){
css-code;
}
- 用@media 开通 注意@符号
- mediatype 媒体类型
- all 所有设备
- screen 屏幕设备
- print 打印设备
- 关键字 and not only
- and：可以将多个媒体特性连接到一起，相当"且"于的意思
- not：排除某个媒体类型，相当于"非"的意思，可以省略
- only：指定某个特定的媒体类型，可省略
- media feature 媒体特性，必须有小括号包含
@media screen and (min-width: 1000px), screen and (min-width: 768px) {
h2 {
color: tomato;
}
}
1. ' , ' 逗号表示 ' 或 ' 的关系 可以写多个 查询条件
@media screen and (max-width: 1000px) and (min-width:768px) {
h2 {
color: tomato;
}
}
2. 多个 and 表示精准限制 屏幕尺寸,上面的表示 `小于 1000 大于 768`时,样式生效
注意
如果要写多个 媒体查询条件,尺寸顺序如下
max-width: 尺寸从大到小排列 ,(max-width表示样式生效的最大尺寸,小于该尺寸样式生效,超出该尺寸样式不生效)min-width: 尺寸从小到大排列 ,(min-width表示样式生效的最小尺寸,大于该尺寸样式生效,小于该尺寸样式不生效)
min-width:
@media screen and (min-width: 768px) {
body {
font-size: 16px;
}
}
@media screen and (min-width: 1000px) {
body {
font-size: 16px;
}
}
@media screen and (min-width: 1200px) {
body {
font-size: 16px;
}
}
max-width:
@media screen and (max-width: 1200px) {
body {
font-size: 16px;
}
}
@media screen and (max-width: 1000px) {
body {
font-size: 16px;
}
}
@media screen and (max-width: 768px) {
body {
font-size: 16px;
}
}
浏览器兼容,浏览器适配,响应式布局的区别.
- 在学习媒体查询之前，我们应该先了解一下
浏览器兼容,浏览器适配,响应式布局他们之间的区别.
浏览器兼容：是一个网页在不同内核或不同版本的浏览器上显示相同样式。
浏览器适配：是一个网页在不同尺寸或不同分辨率的屏幕上显示相同的样式。
响应式布局：是一个网页在不同尺寸或不同分辨率的屏幕上显示不同的样式。响应式作用：用于使同一个网页，可以显示在移动端和pc端。一般通过媒体查询技术实现。
- 媒体查询就是通过判断浏览器窗口的宽度，执行不同样式的渲染，从而实现响应式布局。
关键技术点：
- 1.媒体类型：显示网页的硬件设备。(手机，电脑屏幕，打印机，手表，投影仪，汽车中控)
- 2.媒体特性：规定样式是否显示的设备条件。屏幕宽度，屏幕宽高比，等等。
浏览器兼容主要分为两方面：
- 浏览器内核兼容，和浏览器版本兼容(针对ie)。
- chrome、safari属于webkit内核。
- 老IE10和10以下属于Trident内核。
- firefox属于Gecko内核。
- 新IE属于Edge内核。
- 360等特殊浏览器：多内核浏览器。
由于内核不同，浏览器对一些新样式，和标签渲染的结果可能不同。可以通过添加浏览器私有前缀设置相同的样式。
-moz- 火狐内核的私有前缀，用于兼容火狐内核的浏览器。
-ms- ie内核的私有前缀，用于兼容ie内核的浏览器。
-webkit- 谷歌内核的私有前缀，用于兼容谷歌内核的浏览器。
适配相关知识(单位介绍)
-
vh和vw:适配单位，相对于设备或者浏览器的可视区域窗口进行适配的。类似于固定定位。任何尺寸都看成是100vw和100vh的宽度和高度。
-
弹性布局：利用弹性盒子的特点，强调布局。
-
半分比(%)：参照父元素的单位。
-
媒体查询+rem：（最优方案）rem适合页面的全局适配。比较方便。而且方便管理。
px:不适合移动端适配。
css像素：指的是前端的一个尺寸单位，1px大小。
设备物理像素：指的是手机设备出场时，设定的手机像素点。比如：1280*996、类似于分辨率。
手机屏幕分为一倍屏，二倍屏，三倍屏：(设备之间的关系。)
- 一倍屏：指的是1px的css像素，对应1个物理像素点。
- 二倍屏：指的是1px的css像素，对应2个物理像素点。
- 三倍屏：指的是1px的css像素，对应3个物理像素点。
适配方案：
- 1.将不同逻辑像素尺寸的屏幕平分相同的份数。比如：15 20 10 /份都可以。
- 2.然后用设备的css像素 除以 份，得到的结果就是该像素下对应的html尺寸。
- 3.写移动端页面的时候，UI设计师通常会给你出具设计稿，设计稿就是从众多手机尺寸中，挑选出来的具有代表性的一个尺寸，以设计稿为参照物进行适配即可，设计稿通常是375px，也就是iphone6的大小。
案例一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>苏宁移动端</title>
<!-- <link rel="stylesheet" href="./适配.css"> -->
<style>
* {
margin: 0;
padding: 0;
}
.nav {
/* 1.根据设计稿中导航条的px尺寸。计算rem单位。 rem = 设计稿中元素尺寸 / font-size */
width: 100vw;
height: 1.76rem;
background-color: pink;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 .4rem;
box-sizing: border-box;
}
.left {
/* width: calc(18rem / 25);
height: calc(30rem / 25); */
width: .72rem;
height: 1.2rem;
background-color: aqua;
}
.center {
width: 11.4rem;
height: 1.76rem;
background-color: tomato;
}
.right {
width: .72rem;
height: 1.2rem;
background-color: palevioletred;
}
/* #region #endregion 折叠 */
/* #region */
/* 2.计算不同设备尺寸下，html的font-size大小。 */
/* min 从小到大 max 从大到小*/
@media screen and (max-width: 750px) {
html {
font-size: 50px;
}
}
@media screen and (max-width: 720px) {
html {
font-size: 48px;
}
}
@media screen and (max-width: 540px) {
html {
font-size: 36px;
}
}
@media screen and (max-width: 480px) {
html {
font-size: 32px;
}
}
@media screen and (max-width: 424px) {
html {
font-size: 28.27px;
}
}
@media screen and (max-width: 414px) {
html {
font-size: 27.6px;
}
}
@media screen and (max-width: 400px) {
html {
font-size: 26.67px;
}
}
@media screen and (max-width: 384px) {
html {
font-size: 25.6px;
}
}
@media screen and (max-width: 375px) {
html {
font-size: 25px;
}
}
@media screen and (max-width: 360px) {
html {
font-size: 24px;
}
}
@media screen and (max-width: 320px) {
html {
font-size: 21.33px;
}
}
/* #endregion 媒体查询*/
/* 注意：媒体查询的顺序问题*/
</style>
</head>
<body>
<div class="nav">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
案例二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>适配方案2.0</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
/* font-size: 0.2666vw; 等价于 font-size：1px； 但是1px不能适配 */
/* 尽可能 乘以 100， */
font-size: 26.6666vw;
}
.test {
width: 100vw;
height: .44rem;
background-color: red;
font-size: .2rem;
}
.test1 {
width: 1.15rem;
height: 1.15rem;
background-color: greenyellow;
font-size: .2rem;
}
</style>
</head>
<body>
<!-- 将html的font-size 尺寸，不在根据媒体查询进行设置，而是直接设置为vw单位。
因为设计稿尺寸一般都是375px的，html的font-size应该设置为多少呢？
375px=100vw，=> 1px=0.266666vw 那就将html的font-size设置为0.2666vw即可、
font-size：13.333vw
这个是按照750px 设计稿计算的，750px=100vw ->1px=0.13333vw；但是html的font-size会设置成13.333vw，有哪位0.13333vw的font-size太小了，会影响其他标签的字体，边距，边框，的小尺寸的元素。
-->
<div class="test">
1165
</div>
<div class="test1">41651</div>
</body>
</html>
移动端适配
安装并使用 postcss-px-to-viewport
yarn add postcss-px-to-viewport --dev
npm i postcss-px-to-viewport --save-dev
配置.postcssrc.js （postcss.config.js)文件
module.exports = {
plugins: {
autoprefixer: {
}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
'postcss-px-to-viewport': {
unitToConvert: 'px', // 要转化的单位
viewportWidth: 750, // UI设计稿的宽度
unitPrecision: 6, // 转换后的精度，即小数点位数
propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
selectorBlackList: ['wrap'], // 指定不转换为视窗单位的类名，
minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
replace: true, // 是否转换后直接更换属性值
exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
landscape: false, // 是否处理横屏情况
},
},
};
视频文件配置
npm i -D postcss-px2vp
// postcss.config.cjs
module.exports = {
plugins: {
'postcss-px2vp': {
viewportWidth(rule) {
// 1. 如果设计稿宽度是 750px + 使⽤ Vant
const file = rule.source?.input.file
return file?.includes('vant') ? 375 : 750
},
// viewportWidth: 750, // 2. 如果设计稿宽度是 750px + 不使⽤ Vant
// viewportWidth: 375, // 3. 如果设计稿宽度是 375px + ⽆论是否使⽤ Vant
propList: ['*', '!font*', '!line-height', '!letter-spacing'],
},
},
}
h5 移动端适配
html font-size 设置公式
设置 html 的 font-size 为 100*屏幕宽度/设计稿宽度
举个实际的例子。设计师交付的设计稿宽度是 750px，设计稿上一个 div 的标注尺寸是 375px（宽度是设计稿宽度的一半）。我们可以设置 html 的 font-size 为 100屏幕宽度/设计稿宽度在写 CSS 时设置 div 的宽度是 3.75rem （计算时用设计稿标注值除以 100），边框宽度为 1px 假设用户在逻辑像素宽度是 375px 的设备上打开页面，则 html 的 font-size 是 100375/750 = 50px，div 的宽度是 3.75rem ，即 187.5px 正好是屏幕宽度的一半。