内容简介:前言:实际上在很早之前,CSS 就支持媒体查询了:例如,页面有些部分需要在打印的时候隐藏或者变大,这时候可以使用 media 使某些 style 只在打印的时候生效。而 CSS3 的 Media Queries 的到来,可以让我们针对不同的设备场景使用不同的 CSS。在使用的时候可以在样式表直接书写
本文推荐 PC 端阅读~ 本文版权归 “公众号 | 前端一万小时” 所有,未经授权,请勿转载! 复制代码
css_15 复制代码
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 }parsing-errors } @media screen, print { body { line-height: 1.2 } } 复制代码
2 CSS3 里的媒体查询
CSS2 的媒体类型应用场景极为有限,CSS3 大大拓展了这一能力。
@media screen and (max-width: 990px) { .container{ background: orange; } } /*:rocket:一般来说我们写媒体查询就用这句话就行了,这是最常用的。*/ /*意思就是:当我们的浏览器屏幕(screen)的最大宽度为990px 的时候, 以下的样式生效。如果屏幕不是 ≤990px ,那么以下样式不生效。*/ 复制代码
:bulb:另外,
@media (min-width: 700px) and (orientation: landscape) { ... } /*:rocket:这个是指: 当它最小宽度是 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) { 选择器 { 属性:属性值; } } 复制代码
:warning:注意:一般我们都是写完一个样式之后,再写它对应的媒体查询,而且要注意选择器的权重。
5 面试题实例
:question:
答:
:link:源码及效果展示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; } /*:rocket:当屏幕 <= 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; } } 复制代码
后记:本篇知识点不多,但每个页面又基本上都会用,所以理解的基础上根据实际选择即可。
加油!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 写扩展性好的代码:函数
- 如何借助 Proxy 代理,提升架构扩展性
- AI公司的练级之道:如何更具扩展性?
- 漫谈分布式系统(十五):扩展性的最后障碍
- 漫谈分布式系统(七):扩展性?切就完了
- “DevOps”的人员可扩展性
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Python科学计算(第2版)
张若愚 / 清华大学出版社 / 2016-4-29 / 118
本书介绍如何用 Python 开发科学计算的应用程序,除了介绍数值计算之外,还着重介绍了如何制作交互式二维、三维图像,如何设计精巧的程序界面,如何与 C 语言编写的高速计算程序结合,如何编写声音、图像处理算法等内容。本书采用 IPython notebook 编写,所有的程序均能在本书提供的运行环境中正常运行,书中所印刷的图表以及程序输出为均为自动运行的结果,保证了书中所有程序的正确性以及可读性。......一起来看看 《Python科学计算(第2版)》 这本书的介绍吧!