CSS——让这些“展示”有更好的扩展性——媒体查询

栏目: CSS · 发布时间: 5年前

内容简介:前言:实际上在很早之前,CSS 就支持媒体查询了:例如,页面有些部分需要在打印的时候隐藏或者变大,这时候可以使用 media 使某些 style 只在打印的时候生效。而 CSS3 的 Media Queries 的到来,可以让我们针对不同的设备场景使用不同的 CSS。在使用的时候可以在样式表直接书写
本文推荐 PC 端阅读~

本文版权归 “公众号 | 前端一万小时” 所有,未经授权,请勿转载!
复制代码
CSS——让这些“展示”有更好的扩展性——媒体查询
css_15
复制代码
CSS——让这些“展示”有更好的扩展性——媒体查询
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:

CSS——让这些“展示”有更好的扩展性——媒体查询

答:

: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;
  }
}
复制代码

后记:本篇知识点不多,但每个页面又基本上都会用,所以理解的基础上根据实际选择即可。

加油!


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Pattern Recognition and Machine Learning

Pattern Recognition and Machine Learning

Christopher Bishop / Springer / 2007-10-1 / USD 94.95

The dramatic growth in practical applications for machine learning over the last ten years has been accompanied by many important developments in the underlying algorithms and techniques. For example,......一起来看看 《Pattern Recognition and Machine Learning》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

html转js在线工具
html转js在线工具

html转js在线工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具