原创:itsOli @前端一万小时
本文首发于公众号「前端一万小时」
本文版权归作者所有,未经授权,请勿转载!
本文节选自“语雀”私有付费专栏「前端一万小时 | 从零基础到轻松就业」
❗️❗️❗️
以下链接为本文最新勘误篇章——《让这些“展示”有更好的扩展性——媒体查询》
1. 列举你了解的 HTML5、CSS3 新特性?
2. Canvas 和 SVG 有什么区别?
🙋上方面试题“参考答案详解”,请点击此处查看获取方式!
前言: 实际上在很早之前,CSS 就支持媒体查询了。
例如,页面有些部分需要在打印的时候隐藏或者变大,这时候可以使用 media 使某些 style 只在打印的时候生效。
@media print { /* 适用于印刷的样式 */ }
而 CSS3 的 Media Queries 的到来,可以让我们针对不同的设备场景使用不同的 CSS。
1 常用的媒体类型
-
all(所有),适用于所有设备。
-
handheld(手持),用于手持设备。
-
print(印刷),用于分页材料以及打印预览模式下在屏幕上的文档视图。
-
projection(投影),用于投影演示文稿,例如投影仪。
-
screen(屏幕),主要用于计算机屏幕。
在使用的时候可以在样式表直接书写 @media 指令 + 空格 + 媒体类型(多个用逗号隔开):
@media print {
body {font-size: 10pt;}
}
@media screen {
body {font-size: 13px;}
}
@media screen, print {
body {line-height: 1.2;}
}
2 CSS3 里的媒体查询
CSS2 的媒体类型应用场景极为有限,CSS3 大大拓展了这一能力。
@media screen and (max-width: 990px) {
.container {
background: orange;
}
}
/* 🚀一般来说我们写媒体查询就用这句话就行了,这是最常用的。 */
/*
意思就是:当我们的浏览器屏幕(screen)的最大宽度为 990px 的时候,
以下的样式生效。如果屏幕不是 ≤990px,那么以下样式不生效。
*/
💡另外,
@media (min-width: 700px) and (orientation: landscape) { ... }
/*
🚀这个是指:
当它最小宽度是 700px,并且它的 orientation 是 landscape(横屏)。
orientation 这个属性表示你的浏览器是横屏(landscape)的还是竖屏(portrait)的,
比如说在手机上,浏览器分为横屏和竖屏,那这样的话,
万一用户的浏览器看着是横屏的,那你可能给他一些提示。
比如你做了一些小游戏,这个小游戏不建议横屏去玩,
但是用户的浏览器自己可以去设置让它去旋转,那旋转完成之后,东西都放不下了。
所以你可以给他一个提示,如果检测到它是横屏,你可以让这段 CSS 生效,
那这段 CSS 可能就是一段隐藏的话,说“你浏览器要垂直起来去玩我们的游戏”。
那这样的话,我们不需要使用任何 JS 就可以实现这个效果了。
*/
3 常用的 media 属性
width:浏览器宽度
height:浏览器高度
device-width:设备屏幕分辨率的宽度值
device-height:设备屏幕分辨率的高度值
orientation:浏览器窗口的方向纵向还是横向,当窗口的高度值大于等于宽度时该特性值为 portrait,否则为 landscape。
aspect-ratio:比例值,浏览器的纵横比。
device-aspect-ratio:比例值,屏幕的纵横比。
color:设备使用多少位的颜色值,如果不是彩色设备,值为 0。
color-index:色彩表的色彩数
monochrome:单色帧缓冲器每个像素的字节
resolution:分辨率值,设备分辨率值。
scan:电视机类型设备扫描方式,progressive 或 interlace。
grid:只能指定两个值 0 或 1,是否基于栅格的设备。
4 如何引入 media
有两种常用的引入方式:
4.1 link 方法引入
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
4.2 @media 引入(这个最常用)
@media screen and (min-width: 600px) and (max-width: 800px) {
选择器 {
属性: 属性值;
}
}
❗️注意:一般我们都是写完一个样式之后,再写它对应的媒体查询,而且要注意选择器的权重。
5 面试题实例
❓
答:
🔗源码及效果展示
HTML
<div id="header"></div>
<div id="content">
<div id="left-content"></div>
<div id="right-content"></div>
</div>
CSS
body {
margin: 0;
}
#header {
width: 100%;
height: 200px;
background-color: #33ccff;
}
#left-content {
float: left;
width: 100px;
height: 1000px;
background-color: #ffcc99;
}
#right-content {
margin-left: 100px;
width: 100%;
height: 1000px;
background-color: #823384;
}
/* 🚀当屏幕 <= 700px 时,要及时覆盖上面的样式。 */
@media (max-width: 700px) {
#header {
width: 100%;
height: 50px;
background-color: #33ccff;
}
#left-content {
width: 0;
}
#right-content {
width: 100%;
margin-left: 0;
background-color: #823384;
}
}
后记: 本篇知识点不多,但每个页面又基本上都会用,所以理解的基础上根据实际选择即可。
祝好,qdywxs ♥ you!