目录
一、媒体查询
使⽤@media查询,可以针对不同的媒体类型定义不同的样式
@media可以针对不同的屏幕尺⼨设置不同的样式
当重制浏览器⼤⼩的过程中,⻚⾯也会根据浏览器的宽度和⾼度重新渲染⻚⾯
二、语法
@media 媒体类型 关键字 (媒体特性){css}
媒体类型(可以同时⽤多个媒体类型,⽤逗号隔开,这样他们之间就是或的关系)
all 所有设备
print 打印设备或打印预览
screen 带屏幕的设备(电脑,⼿机)**
speech 屏幕阅读器
关键字 and not only 来连接
将媒体类型或多个媒体特性连接到⼀起作为媒体查询的条件
and:可以将多个媒体特性连接到⼀起,相当于且的意思
not:排除某个媒体类型,相当于“⾮”的意思,可以省略
only:指定某个特定的媒体类型,可以省略
三 、媒体特性(必须要有⼩括号)
媒体特性(必须要有⼩括号)
width ⻚⾯可⻅宽度
max-width 视⼝的最⼤宽度(视⼝⼩于指定宽度时就⽣效,⼩于等于xxxpx)
min-width 视⼝的最⼩宽度(视⼝⼤于指定宽度时就⽣效)
max-height 最⼤⾼度
min-height 最⼩⾼度
orientation:landscape 横屏
orientation:portrait 竖屏
四、常⽤的断点
样式切换的分界点,我们称其为断点,也就是⽹⻚的样式
尺寸范围 | 设备划分 | |
<768px | 超小屏幕 | max-width=768px |
>=768px~<992px | 小屏幕 | min-width=768px |
>=992px ~<1200px | 中屏幕 | min-width=992px |
>=1200px | 大屏幕 | min-width=1200px |
五、引入方式
<style>
body {
background-color: red;
}
/* 第⼀种⽅式 直接引⼊ */
/* 在992px-768px之间设置的样式 */
按照设计稿与设备宽度的⽐例,动态计算并设置html根标签的font-size⼤⼩(媒体查询)
css中,设计稿元素的宽、⾼、相对位置等取值,按照同等⽐例换算为rem为单位的值
根字体=(⼿机横向设备独⽴像素值)/10 例如:iPhone6,根字体=375/10=37.5px 以rem为单位,
即1rem=37.5px
如果设计稿是375px 例如:iPhone6,根字体=375/10=37.5px 以rem为单位,即1rem=37.5px
⻚⾯中数值为:设计值/(设计稿宽度/10) 例如:100px/(375px/10)=2.667rem
⼿机横向设备独⽴像素值,可以⽤flexible.js计算,⽤⾥⾯的js去做处理
css元素的设计值换算⽤css中的Cssrem: Root Font Size去实现 px to rem & rpx & vw (cssrem)
只要确定当前html⽂字⼤⼩就可以了.
@media screen and (max-width: 992px) and (min-width: 768px) {
body {
background-color: orange;
}
}
/* 可以简写,默认写了screen and */
@media (max-width: 768px) {
body {
background-color: yellowgreen;
}
}
</style>
<!-- 第⼆种⽅式:外接式,针对不同的界⾯效果,可以写不同的样式,分别引⼊,写的时候,最好从⼩
到⼤来写
语法:media="媒体类型 关键字 (媒体特性)
-->
<link rel="stylesheet" href="./600.css" media="screen and (max-width:
600px) " />