media在HTML中作用,web前端：关于css中@media的一些基本使用

层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现html(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。css不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

最近编写响应式的时候在使用@media用的不是很顺手，所以就记录一下方便查看

基本语法：

@media+(not|only)+媒体类型+(and+媒体查询)

我们首先了解一下媒体类型，常用的不多，就几个：screen(电脑屏幕)，print(打印或者打印预览)，all(所有设备)

(本文侧重讲述screen，因为本人最近都用这个，嘻嘻)

然后这个设备类型的作用是什么？

答：用来匹配查询条件的，就是你是要以什么标准去匹配，是按照屏幕大小改变的条件去匹配还是按照打印的方式去匹配

然后后面的(and+媒体查询)，这个是用来限制查询条件的，例如当屏幕小于最大宽度时，@media中的class就起作用了

例子：当屏幕宽度小于678px的时候，.box类的背景颜色为红色

@mediascreenand(max-width:678px){

.box{

background-color:red;

}

当然你的媒体查询条件也可以有多个限制

例子：当屏幕宽度在678px到992px之间时，.box类的背景颜色为红色

@mediascreenand(min-width:678px)and(max-width:992px){

.box{

background-color:red;

}

最后是两个修饰词，not，only

先说only，用来匹配媒体类型，表示只对该媒体类型适用

例子：只对screen类型起作用，对于print等其他设备不起作用

@mediaonlyscreenand(max-width:678px){

.box{

background-color:red;

}

not就是对于除了该媒体类型的其他类型起作用

例子：对于screen类型不起作用，其他类型起作用

@medianotscreenand(max-width:678px){

.box{

background-color:red;

}

随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。

media在HTML中作用,web前端：关于css中@media的一些基本使用相关推荐

Web前端，CSS中盒子模型的组成，了解掌握盒子模型的边框、内边距、外边距
前言持续总结输出中,今天分享的是Web前端,CSS中盒子模型的组成,了解掌握盒子模型的边框.内边距.外边距 1.盒子模型的介绍盒子的概念页面中的每一个标签,都可看做是一个 "盒子&qu ...
Web前端，CSS中的浮动、清除浮动
前言持续总结输出中,今天分享的是Web前端,CSS中的浮动.清除浮动.浮动和清除浮动是我们常用的css样式.今天我们就来了解他们. 1.浮动的作用早期的作用:图文环绕现在的作用:网页布局 • 场 ...
Web前端，CSS中关于块级元素、行内元素、行内块元素、元素显示模式转换、CSS特性继承性和层叠性、普通导航和五彩导航的制作
前言持续总结输出中,今天分享的是Web前端,CSS中关于块级元素.行内元素.行内块元素.元素显示模式转换.CSS特性继承性和层叠性 1.块级元素特点: 独占一行(一行只能显示一个) 宽度默认是父元 ...
Web前端，CSS中关于背景颜色、背景图片、背景平铺、背景位置、背景相关属性连写
前言持续总结输出中,今天分享的是Web前端,CSS中关于背景颜色.背景图片.背景平铺.背景位置.背景相关属性连写 1.背景颜色 background-color(bgc) 颜色取值: 关键字.rgb ...
双飞翼HTML圣杯布局,Web前端：CSS中的圣杯布局与双飞翼布局
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态 ...
canvas clear 指定属性的元素_好程序员web前端分享CSS属性组成及作用
好程序员web前端分享CSS属性组成及作用学习目标 1.css属性和属性值的定义 2.css文本属性 3.css列表属性 4.css背景属性 5.css边框属性 6.css浮动属性一.css属性和 ...
web前端分享HTML5中的nav标签学习笔记
好程序员web前端分享HTML5中的nav标签学习笔记,nav标签全称navigation,顾名思义,是导航的意思.根据HTML5的相关标准定义如下: "A section of a pag ...
props写法_好程序员web前端培训React中事件的写法总结
好程序员web前端培训React中事件的写法总结,React的事件处理和DOM元素很相似,但是语法上是有不同的: 1.react事件采用驼峰命名法,而不是纯小写. 驼峰命名法(camelCase):命 ...
【从0到1学Web前端】javascript中的ajax对象（一）
[从0到1学Web前端]javascript中的ajax对象(一) 如今最流行的获取后端的(浏览器从server)数据的方式就是通过Ajax了吧.今天就来具体的来学习下这个知识吧.假设使用ajax来訪 ...

media在HTML中作用,web前端：关于css中@media的一些基本使用

media在HTML中作用,web前端：关于css中@media的一些基本使用相关推荐

最新文章

热门文章