内容简介:根据一个或多个基于设备类型、具体特点和环境的媒体查询来应用样式。简单来说就是针对不同的媒体类型(比如屏幕、打印机或者屏幕阅读器)定义不同的样式,可以针对不同的屏幕尺寸设置不同的样式(比如手机iphone6和iPhone6plus它们两尺寸是不一样的、笔记本电脑和电脑屏幕也是不一样的大小),应用的、了响应式布局我们就可以实现在小尺寸的屏幕上或者大尺寸的台式机的屏幕上显示的效果是接近的,或者说不至于出现样式的错乱。完全支持@media第一个浏览器版本(ie9以下是不支持的)图片描述
1:基本概念
根据一个或多个基于设备类型、具体特点和环境的媒体查询来应用样式。简单来说就是针对不同的媒体类型(比如屏幕、打印机或者屏幕阅读器)定义不同的样式,可以针对不同的屏幕尺寸设置不同的样式(比如手机iphone6和iPhone6plus它们两尺寸是不一样的、笔记本电脑和电脑屏幕也是不一样的大小),应用的、了响应式布局我们就可以实现在小尺寸的屏幕上或者大尺寸的台式机的屏幕上显示的效果是接近的,或者说不至于出现样式的错乱。
2:浏览器兼容
完全支持@media第一个浏览器版本(ie9以下是不支持的)
图片描述
3:语法
在了解语法前,我们需要了解一下css,css叫做层叠样式规则,也就是后面的会把前面的覆盖掉,这里涉及到了优先级的问题。因此媒体查询@media一般放在css文件的最下面,因为读文件是从上到下依次进行,为了不被覆盖掉。
写法一:
@media mediatype and | not | only (media feature) { CSS-Code; }
写法二:在不同的屏幕尺寸下面引用不同的css文件
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
那么media到底是怎么使用的呢?首先是它的媒体类型:
4:媒体类型(分为四种)
all(所有设备)
@media all and|not|only (media feature) { CSS-Code; }
screen(电脑屏幕,平板电脑,智能手机)
@media screen and|not|only (media feature) { CSS-Code; }
print(打印机和打印预览)
@media print and|not|only (media feature) { CSS-Code; }
speech(屏幕阅读器等发声设备,一般是供盲人浏览网页使用)
@media speech and|not|only (media feature) { CSS-Code; }
5:运算符(是跟在mediatype后面的)
运算符是跟在mediatype后面的,它的意思就是and连接、not不是、only,除此之外还有一个,逗号,逗号就是或的意思,两个逗号左侧或在右侧满足任何一个都会应用样式。
and
@media screen and (max-width: 600px) { CSS-Code; }
not
@media not screen { CSS-Code; }
only
@media only screen { CSS-Code; }
,表示或的意思
@media print , (max-width : 600px) { CSS-Code; }
6:媒体功能
我们大多数的开发工作都是应用在屏幕上的,屏幕有很多尺寸,这个时候我们就需要使用媒体功能来应用不同的样式。下面主要介绍了三个:
width / height
@media screen and (width : 600px) , (width : 800px) { CSS-Code; }
min-width / min-height
@media screen and (min-width : 600px) { CSS-Code; }
max-width / max-height
@media screen and (max-width : 600px) { CSS-Code; }
除了上面的三个主要的还有一些其他的媒体功能:
device-height - 屏幕可见高度 min-device-height - 最小的可视区域 max-device-height - 最大的可视区域 device-width - 屏幕可见宽度 max-device-width min-device-width (color: 8) - 每一组彩色原件的个数 max-color min-color (color-index: 1500) - 设备的彩色查询表条目数 max-color-index min-color-index (orientation: landscape) - 横纵 (monochrome: 0) - 一个单色框架缓冲区中每像素包含的单色原件个数 min-monochrome max-monochrome (grid: 1) - 是否使用栅格或点阵 (scan: interlace) - 扫描工序 (device-aspect-ratio: 8/5) - 屏幕可见区域宽高比 min-device-aspect-ratio max-device-aspect-ratio (aspect-ratio: 8/5) - 页面可见区域宽高比 min-aspect-ratio max-aspect-ratio (resolution: 996dpi)- 分辨率 min-resolution max-resolution device-pixel-ratio - 像素比 min-device-pixel-ratio max-device-pixel-ratio
其中比较重要的一个像素比 device-pixel-ratio:又分为物理像素(实际的硬件像素)和逻辑像素(跟适口viewport有关)。
7:常见的自适应布局方式
- px和Viewpor
- 媒体查询
- 百分比布局
- rem布局 - 专题介
- vw/vh - 相对于视窗的尺寸
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
人人都是架构师:分布式系统架构落地与瓶颈突破
高翔龙 / 电子工业出版社 / 2017-5 / 69
《人人都是架构师:分布式系统架构落地与瓶颈突破》并没有过多渲染系统架构的理论知识,而是切切实实站在开发一线角度,为各位读者诠释了大型网站在架构演变过程中出现一系列技术难题时的解决方案。《人人都是架构师:分布式系统架构落地与瓶颈突破》首先从分布式服务案例开始介绍,重点为大家讲解了大规模服务化场景下企业应该如何实施服务治理;然后在大流量限流/消峰案例中,笔者为大家讲解了应该如何有效地对流量实施管制,避......一起来看看 《人人都是架构师:分布式系统架构落地与瓶颈突破》 这本书的介绍吧!