CSS中的media

作者: 肆意木 | 来源:发表于2017-06-01 21:35 被阅读42次

使用 @media 可以针对不同的媒体类型定义不同的样式。

下面这段代码就是如果文档宽度小于 300 像素则修改背景演示(background-color):

@media screen and (max-width: 300px) {
   body {
      background-color:lightblue;
  }
}

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
<h5>CSS用法：</h5>

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

我在代码中遇到的是如下这种情况：

media="screen"

查询文档可以知道screen媒体类型是——用于电脑屏幕，平板电脑，智能手机等。

成长（18/2000）——SASS2
@media Sass 中 @media 指令与 CSS 中用法一样如果 @media 嵌套在 CSS 规则内，...
CSS中的media
使用 @media 可以针对不同的媒体类型定义不同的样式。下面这段代码就是如果文档宽度小于 300 像素则修改背...
使用@media screen解决移动web开发的多分辨率问题
在css2中就有media type属性，用于判断媒体类型。在css3中新增了 media query属性用于增强...
media query和media type总结(转)
media type -- 媒体类型 media type是css2中的一个非常有用的属性，通过media typ...
Html5响应式布局——Media Query
使用Media Query (媒介查询)来实现响应式布局。 CSS中的Media Query设备宽高： devic...
@media
css3中我们可以使用@media来实现响应式布局 1. 语法 @media mediaType and|not|...
媒体查询
基本语法@media mediatype and|not|only (media feature) { CSS-C...
Sass @media指令
本节我们学习 Sass 中的 @media 指令，@media 指令用于设置样式规则到不同的媒体类型，这和 CSS...
Sass @media指令
本节我们学习 Sass 中的 @media 指令，@media 指令用于设置样式规则到不同的媒体类型，这和 CSS...
CSS3 Media Queries 学习笔记
CSS2 引入媒体类型 Media Types CSS2 引入了 @media 规则，目的是给不同的媒体类型 ...

网友评论

本文标题：CSS中的media

本文链接：https://www.haomeiwen.com/subject/fgoefxtx.html

CSS中的media