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:不适合移动端适配。
扫描二维码关注公众号,回复: 16503603 查看本文章
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 正好是屏幕宽度的一半。