持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第19天,点击查看活动详情
“金秋十月,我要连续30天更文,做劳模,拿手机摄影神器!点击查看活动详情 “即可成功参与
媒体查询的介绍
场景:手机屏幕大小不同,分辨率不同,如何设置不同的html标签
解决方案:需要使用媒体查询来设置差异化CSS样式
媒体查询是CSS3的新语法,媒体查询能够检测视口的宽度,然后编写差异化的CSS样式
- 使用@media查询,可以针对不用的媒体类型定义不同的样式
- @media可以针对不同的屏幕尺寸设置不同的样式
- 当你重置浏览器大小的过程中,页面也会根据浏览器的高度和宽度重新渲染页面
- 目前针对很多苹果手机、安卓手机、平板等设备都用到多媒体查询
媒体查询主要是解决:移动端不同屏幕下的适配问题,通过媒体查询能够检测到视口的宽度,然后编写差异化的CSS样式,当某个条件成立时,就会执行对应的CSS样式。
媒体查询的基本语法
@定义一个媒体查询 媒体类型(设备) 关键字 媒体特性(检测的视口宽度)
@media mediatype and|not|only (media feature){
当符合条件时执行的CSS样式;
css-Code;
}
使用@media 开头
@ 之前在动画和字体见过,@表示的是定义,定义一个动画,和定义一个字体
这里表示定义一个媒体查询
mediatype 媒体类型
(设备)
将不同的终端设备划分成不同的类型,称为媒体类型
and not only 关键字
(将设备和检测视口宽度条件链接到一起)
将媒体类型 或 多个媒体特性 链接 到一起 做为 媒体查询的条件
media feature 媒体特性
(检测视口宽度)
必须有小括号包含
每个媒体类型都具有各自不同的特性,根据不同媒体类型的媒体特性设置不同的展示风格,注意他们要加小括号(暂且了解三个)
widht
宽度定死,然后媒体查询检测视口的宽度,当这其中的某个条件成立时,就执行对应的CSS样式
/* 视口宽度320px,根字号为32px */
@media screen and (width:320px) {
html {
font-size: 32px;
}
}
/* 视口宽度375px,根字号为37.5px */
@media screen and (width:375px) {
html {
font-size: 37.5px;
}
}
/* 视口宽度414px,根字号为41.4px */
@media screen and (width:414px) {
html {
font-size: 41.4px;
}
}
min-width (从小到大)
设备页面可见的最小宽度 页面宽度大于等于
max-width(从大到小)
设备页面可见的最大宽度 页面宽度小于等于
媒体查询综合写法
这句话的意思是: 媒体类型为:电脑屏幕 并且 媒体特性:最大宽度是800px 设置我们想要的样式
@media screen and (max-width:800px){
body{
background-color:pink; /*如果在屏幕上并且宽度小于等于800像素时,body的背景颜色就变成粉色*/
}
}
@media screen and (max-width:500px){
body{
background-color:red; /*如果在屏幕上并且宽度小于等于500像素时,body的背景颜色就变成红色*/
}
}
总结:媒体查询可以根据不同的屏幕尺寸来改变不同的样式
媒体查询现在的写法
媒体查询现在的写法:可以将将媒体类型和关键词省略
如何确定根字号大小
场景:想要屏幕有适配的效果,我们需要媒体查询里写上不同视口下的根字号大小,但是根字号大小是如何确定的?
解决方案:
- 根字号大小是根据视口大小来确定的
1、确定设计稿对应的设备的html标签字号 比如屏幕视口是375的,那么他的根字号就是37.5/2
查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号(1/10视口宽度)
html字号=视口宽度÷10
后面不用手写媒体查询来设置不同视口下根字号的大小,引入flexible.js配合rem实现在不同宽度的设备中,网页元素尺寸等比缩放效果
如何确定rem单位的大小
场景:我们在书写代码时,根字号是根据视口的大小确定的,但是元素的rem值是需要我们计算来确定的。
解决方案:
- rem单位的尺寸
/* 视口宽度320px,根字号为32px */
@media screen and (width:320px) {
html {
font-size: 32px;
}
}
/* 视口宽度375px,根字号为37.5px */
@media screen and (width:375px) {
html {
font-size: 37.5px;
}
}
/* 视口宽度414px,根字号为41.4px */
@media screen and (width:414px) {
html {
font-size: 41.4px;
}
}
div {
/* 我的需求:我想在视口是375的大小下,我的盒子大小为40px */
width: 1.06rem; rem=60/37.5
height: 1.06rem; rem=60/37.5
background-color: pink;
}
手写媒体查询的弊端和解决方案
弊端:以上我们学习的媒体查询也只是检测了三个视口,并且分别设置了根字号,但是手机设备多,屏幕尺寸不统一,视口不仅仅只有这三个
解决方案为:使用flexible.js配合rem实现在不同宽度的设备中,网页元素尺寸等比缩放效果
rem+媒体查询适配方案技术使用(市场主流)
适配目标
1、让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备
2、使用媒体查询根据不同设备按比例设置html字体大小,然后页面元素使用rem做尺寸单位,当html字体大小变化元素尺寸也会发生变化,从而达到等比缩放的适配。
技术方案
- flexible.js
使用flexible.js配合rem实现在不同宽度的设备中,网页元素尺寸等比缩放效果
flexible.js是手淘开发出的一个用来适配移动端的js框架
核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size
只要是用rem做适配,在工作中我们不需要手动写媒体查询来检测视口宽度,直接引入flexible.js就行