欧宝体育app官方入口 - 欧宝体育最新app—Web前端教程:关于css中@media的一些基本使用

日期:2022-01-21 01:50:01 | 人气:

本文摘要:Web前端教程 层叠样式表(英文全称:CascadingStyleSheets)是一种用来体现html(尺度通用标志语言的一个应用)或XML(尺度通用标志语言的一个子集)等文件样式的盘算机语言。css不仅可以静态地修饰网页,还可以配合种种剧本语言动态地对网页各元素举行花样化。 CSS能够对网页中元素位置的排版举行像素级准确控制,支持险些所有的字体字号样式,拥有对网页工具和模型样式编辑的能力。 最近编写响应式的时候在使用@media用的不是很顺手,所以就记载一下利便检察。

欧宝体育app

Web前端教程  层叠样式表(英文全称:CascadingStyleSheets)是一种用来体现html(尺度通用标志语言的一个应用)或XML(尺度通用标志语言的一个子集)等文件样式的盘算机语言。css不仅可以静态地修饰网页,还可以配合种种剧本语言动态地对网页各元素举行花样化。  CSS能够对网页中元素位置的排版举行像素级准确控制,支持险些所有的字体字号样式,拥有对网页工具和模型样式编辑的能力。

欧宝体育app

  最近编写响应式的时候在使用@media用的不是很顺手,所以就记载一下利便检察。  基本语法:  @media+(not|only)+媒体类型+(and+媒体查询)  我们首先相识一下媒体类型,常用的不多,就几个:screen(电脑屏幕),print(打印或者打印预览),all(所有设备)  然后这个设备类型的作用是什么?  答:用来匹配查询条件的,就是你是要以什么尺度去匹配,是根据屏幕巨细改变的条件去匹配还是根据打印的方式去匹配  然后后面的(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便降生了。


本文关键词:Web,前端,教程,关于,欧宝体育app,css,中,@media,的,一些,基本

本文来源:欧宝体育app-www.hbhytgy.com

旋转小火锅定制流程

免费咨询

提供图纸

免费设计

免费报价

无忧安装

终身维护